Vue.js Protokoll API Endpunkt Antwort mit Vue-Ressource

Question

Ich versuche Protokollieren Sie die API-Antwort in meiner Komponente nur um Zweck zu testen, aber ich bekomme immer noch einen Fehler 401 (nicht autorisiert), ich mache es in meinem localhost, meine API ist auch in lokalen Host gehostet, sondern nur virtuell-Host-uRL verwenden, so dass ich dies: http://api.myurl.dev

und ich bin mein vue in localhost läuft: 8080 mit vue-cli.

dies ist mein Code im, mein main.js:

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import VueResource from 'vue-resource' 
import Vuex from 'vuex' 
import router from './routes/router.js' 
import App from './App.vue' 

Vue.use(VueRouter) 
Vue.use(VueResource) 
Vue.use(Vuex) 

/* eslint-disable no-new */ 

// Start 
new Vue({ 
    router, 
    el: '#app', 
    render: h => h(App) 
}) 

// Bearer token auth 
Vue.http.interceptors.push((request, next) => { 
    request.headers.set('Authorization', 'Bearer eyJ0...') 
    request.headers.set('Accept', 'application/json') 
    next() 
}) 

und meine App.vue

<template> 
    <div id="app"> 
     <img src="./assets/logo.png" alt=""> 
     <button type="button" @click="getFilial">click</button> 
     </div> 
</template> 

<script> 
    export default { 
    data() { 
     return { 
     context: 'app context', 
     loaded: false 
     } 
    }, 
    methods: { 
     getFilial() { 
     this.$http.get('http://api.myurl.dev/educational/filials').then(response => { 
      console.log(response.data) 
     }) 
     } 
    } 
    } 
</script> 

<style> 
#app { 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    text-align: center; 
    color: #2c3e50; 
    margin-top: 60px; 
} 
</style> 

Answer 1

Auslösen Ihre API durch vue-Ressource, es tatsächlich antwortet auf Ihre Frontend-Anwendung, für die Sie nicht berechtigt sind, sie zu verwenden, mit einem entsprechenden HTTP 401-Statuscode.

Konzentrieren Sie sich auf Ihre Backend-API! Ihre Frontend-Anwendung läuft ziemlich gut und tatsächlich kommuniziert mit Ihrer API, die "401" antwortet :)

Vielleicht ist Ihre Kopfzeile (Authorization: Bearer eyJ0...) nicht wie erwartet von Ihrer API formatiert, aber wiederum konzentrieren sich auf Ihre API zu debuggen Dies!