Vue.js log API endpoint response with vue-resource

Question

i'm trying log the API response in my component just to test purpose, but i still get a error 401 (unauthorized), i'm doing it in my localhost, my API is hosted in localhost too, but just using virtual-host url, so i get this: http://api.myurl.dev

and i'm running my vue in localhost:8080 using vue-cli.

this is my code im my 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()
})

and my 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

Triggering your API through vue-resource, it is actually answering to your frontend application that you are not authorized to consume it, with an appropriate HTTP 401 status code.

Focus on your backend API! Your frontend application is running pretty well, and actually communicating with your API, which answers "401" :)

Maybe your header (Authorization: Bearer eyJ0...) is not formatted as expected by your API but, again, focus on your API to debug this!