Axios在请求中没有传递头信息。

18 浏览
0 Comments

Axios在请求中没有传递头信息。

我正在构建一个VueJS应用程序，使用JSON Web令牌作为我的身份验证系统。当我登录用户时，我将令牌存储在localStorage中，这样就可以正常工作。我检查了头部，并且它在'Authorization'参数中。我使用axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')来传递。我看到头部是正确的。但是当我向我的API中的受保护路由执行GET请求时，返回“未经授权”。但是当我手动在请求中传递令牌时，可以正常工作。有人知道如何在执行某个请求时自动传递头部吗？

0

3 答案

0 Comments

Axios not passing headers on requests（Axios在请求中未传递头部信息）是一个常见的问题。这个问题可能出现的原因是服务器没有从请求的头部中获取到令牌（token）。为了解决这个问题，我们可以按照以下步骤进行操作：

1. 检查服务器是否从请求的头部中获取到了“Authorization”字段的令牌。

2. 如果第1步没有问题，那么你可能希望在网页刷新后仍然能够执行API请求，那么可以按照以下步骤进行操作：

axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');

3. 如果第2步没有解决问题，那么可以尝试使用axios的拦截器来设置请求的头部信息。可以按照以下步骤进行操作：

axios.interceptors.request.use(function (config) {
  const token = 'Bearer ' + localStorage.getItem('token');
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

通过以上步骤，我们可以解决Axios在请求中未传递头部信息的问题。

0
0 Comments

Axios not passing headers on requests问题的出现原因是在使用Axios发送请求时，没有正确地传递headers参数，导致请求中没有携带相应的头部信息。解决方法是在发送请求时，通过headers参数手动添加Authorization头部信息。

具体的解决方法如下所示：

在发送GET请求时，需要在headers参数中添加Authorization头部信息，可以通过localStorage获取token，并将其与"JWT "拼接后作为Authorization的值。代码如下所示：

const auth = {
    headers: {Authorization:'JWT ' + localStorage.getItem('token')} 
}
axios.get('http://yourapi.com',auth).then(result => { 
    console.log(result.data)
})

在发送POST请求时，同样需要在headers参数中添加Authorization头部信息。同时需要注意的是，headers参数应作为axios.post方法的第三个参数传入。代码如下所示：

const auth = {
    headers: {Authorization:'JWT ' + localStorage.getItem('token')} 
}
axios.post('http://yourapi.com',{somekey:'some value'},auth).then(result => { 
    console.log(result.data)
})

如果希望全局设置Axios的headers参数，可以使用"vuex"来实现。Vuex是一个集中式的状态管理模式，可以在其中创建getters作为Axios请求，并在所有的服务器端组件中访问这些getters。关于Vuex的具体使用方法可以参考官方文档。

0
0 Comments

Axios not passing headers on requests这个问题出现的原因是在使用Axios发送请求时，没有正确传递headers参数，导致请求没有包含所需的头部信息。

解决这个问题的方法是使用axios.create方法创建一个新的axios实例，并在配置对象中包含所需的headers。然后，使用该实例进行后续的请求调用。

下面是一个示例代码，演示了如何使用axios.create方法创建实例并设置headers：

var App = Vue.component('app', {
  mounted () {
    this.response = null
    this.axiosInstance = axios.create({
      baseURL: 'http://localhost:5000/',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      }
    })
  },
  data () {
    return {
      response: this.response,
    }
  },
  methods: {
    login () {
      this.axiosInstance.post('login', {username: 'test', password: 'test'})
        .then(resp => {
          this.accessToken = resp.data.access_token
          this.axiosInstance.defaults.headers['Authorization'] = 'Bearer ' + this.accessToken
        })
        .catch(err => this.response = err.response.status + ' ' + err.response.statusText)
    },
    protected () {
      this.axiosInstance.get('protected')
        .then(resp => this.response = resp.data)
        .catch(err => this.response = err.response.status + ' ' + err.response.statusText)
    }
  },
  template: '
'
})

在上述代码中，通过调用axios.create方法创建了一个名为axiosInstance的新实例，并在配置对象中指定了baseURL和headers。在login方法中，使用该实例发送POST请求，并在成功回调中设置了请求的Authorization头部。在protected方法中，使用该实例发送GET请求。

通过以上的解决方法，我们可以确保在使用Axios发送请求时正确传递headers参数，从而解决Axios not passing headers on requests的问题。

0