Я пытаюсь настроить 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
.