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

Question

我正在构建一个VueJS应用程序，并将JSON Web Tokens作为我的认证系统。当我登录用户时，我使用localStorage存储令牌，一切都正常。我检查头文件，它在“Authorization”参数中。

我使用axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')传递。

我检查头文件，一切正常。但是当我向我的API的受保护路由执行GET请求时，返回“未经授权”。但是，当我手动在请求中传递标记时，一切正常。

有人知道如何在执行某些请求时自动传递标题吗？

- Gustavo Dias

Answer 1

您可以使用axios.create来创建一个带有配置对象的新 axios 实例，包括头信息。这个配置将被用于您使用该实例进行的每次后续调用。类似以下代码可行：

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: '<div><button @click="login">Connect</button><button @click="protected">Protected</button></div>'
})

- Yeray Diaz

Answer 2

试试这个...

//in get request
const auth = {
        headers: {Authorization:'JWT ' + localStorage.getItem('token')} 
    }

axios.get('http://yourapi.com',auth).then(result => { 
 console.log(result.data)
})

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

- Kartik Garasia

---

有没有一种方法可以全局设置axios来使用它？ - Gustavo Dias

https://dev59.com/jVgQ5IYBdhLWcg3wRBvJ?rq=1 可能会有帮助。 - Yeray Diaz

你可以使用中央存储系统"vuex"，请查看此链接：https://vuex.vuejs.org/zh/guide/。它非常简单易用。另外，我也在使用它。你可以将getter作为axios请求创建，并在所有服务器端组件中访问。 - Kartik Garasia

Answer 3

对我来说，问题在于大写的Headers与小写的headers之间的区别。应该使用小写字母。我的IDE给了我错误的自动完成（即使用大写H）。

这个可以解决问题：

await axios.get(url, {
    headers: { 'x-custom-header': 'super header value' }
});

这不行！

await axios.get(url, {
    Headers: { 'x-custom-header': 'super header value' }
});

- mihaa123

Answer 4

1. 检查服务器是否从“Authorization”头部获取了令牌

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

3. 如果第2步有效，则可能希望在Web刷新后执行API，然后请遵循：

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

  return config;
});

- JillAndMe

Answer 5

拦截器会在每个请求中作为授权标头包含您的身份验证令牌：

axios.interceptors.request.use(
 function(config) {
  const token = localStorage.getItem('token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
 },
 function(error) {
  return Promise.reject(error)
 }
)

你可以将它放在主文件中，例如 main.js

- Ismael Soschinski