Question

我正在尝试设置一个Vuejs前端应用程序（vue-cli webpack模板），以便放在我的Laravel API之上。

通过提供正确的身份验证令牌，我可以通过vue-resource从API获得成功的响应，例如：

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自述文件，我在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返回。

Answer 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()
})

Answer 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()

}）;

用于身份验证标头的vue-resource拦截器

2 个答案: