Я пытаюсь настроить приложение Vuejs (шаблон веб-пакета vue-cli), чтобы оно располагалось поверх моего Laravel API.

Я могу получить успешный ответ от API с помощью vue-resource, указав правильный токен авторизации, например:

methods: {
    getUser () {
      this.$http.get('http://localhost:8000/api/user', 
      {
        headers: {
          'Authorization': 'Bearer eyJ0e.....etc',
          'Accept': 'application/json'
        }
      }).then((response) => {
        this.name = response.data.name
      });
    },

Однако сейчас я пытаюсь настроить перехватчики, чтобы токен пользователя автоматически добавлялся для каждого запроса.

Основываясь на readme vue-ресурса, я пытаюсь это в моемmain.js:

Vue.use(VueResource)

Vue.http.interceptors.push((request, next) => {
  request.headers['Authorization'] = 'Bearer eyJ0e.....etc'
  request.headers['Accept'] = 'application/json'
  next()
})

А потом обратно в мой компонент у меня теперь просто есть:

this.$http.get('http://localhost:8000/api/user').then((response) => {
    this.name = response.data.name
});

Проблема:

Когда я указываю заголовки вget Я получаю успешный ответ, но когда я прохожу их черезinterceptor Я вернусь401 Unauthorized с сервера. Как я могу исправить это, чтобы ответить успешно при использовании перехватчика?

Редактировать: Когда я использую dev-tools для просмотра исходящих запросов, я вижу следующее поведение:

Делая запрос, предоставляя заголовки$http.getУспешноOPTIONS запрос, а затем успешныйGET запрос сAuthentication заголовок подается наGET запрос.

Тем не менее, когда я удаляю заголовки из$http.get прямо и переместить их на перехватчик, я только сделатьGET запрос иGET не содержитAuthentication заголовок, таким образом, он возвращается как401 Unauthorized.