Перехватчик vue-ресурсов для заголовков auth

Я пытаюсь настроить Vuejs fronted application (vue-cli webpack template), чтобы сидеть поверх моего API Laravel.

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

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
      });
    },

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

Основываясь на vue-resource readme, я пытаюсь это сделать в своем 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 с сервера. Как я могу исправить это, чтобы успешно ответить при использовании перехватчика?

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

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

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

Ответ 1

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

Это должно быть так:

Vue.use(VueResource)

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

Пока я это делал:

Vue.use(VueResource)

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

Ответ 2

Добавьте этот параметр:

Vue.http.options.credentials = true;

И используйте перехватчики для глобального пути:

Vue.http.interceptors.push(function(request, next) {

request.headers['Authorization'] = 'Basic abc' //Base64
request.headers['Accept'] = 'application/json'
next()

});