vue.jsログvue-resourceを使用したAPIエンドポイントの応答

Question

私のコンポーネントで目的をテストするためにAPIレスポンスを記録しようとしていますが、まだ401（権限のない）エラーが発生しています。私のAPIはlocalhostでもホストされていますが、仮想ホストのURLを使用しています。http://api.myurl.dev

私はvue-cliを使用してlocalhost：8080で自分のvueを実行しています。

これは私の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() 
}) 

と私のApp.vue VUE-リソースを通して、あなたのAPIをトリガ

<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

、それが実際に応答しています適切なHTTP 401ステータスコードを使用して、フロントエンドアプリケーションで消費することは許可されていません。

バックエンドAPIに注目してください。あなたのフロントエンドアプリケーションはかなりうまく動いており、実際にAPIと通信しています。これは「401」と答えています。

あなたのヘッダー（Authorization: Bearer eyJ0...）は、あなたのAPIによって予期どおりにフォーマットされていません。この！