详解axios设置header

一、axios设置header跨域

在跨域请求中，前端需要设置{' '}Access-Control-Allow-Headers{' '}来允许header中的自定义字段。同时后端也需要设置{' '}Access-Control-Expose-Headers{' '}来暴露header中的自定义字段。

在axios中，可以通过设置{' '}withCredentials: true{' '}来携带跨域请求的cookie信息。然后在请求头中中设置{' '}Access-Control-Allow-Credentials{' '}为{' '}true{' '}即可。

axios.get(url, {
  withCredentials: true,
  headers: {
    'Access-Control-Allow-Credentials': true,
    'Access-Control-Allow-Origin': 'http://example.com'
  }
})

二、axios设置headers

在axios中设置header，可以通过{' '}headers{' '}进行设置。我们可以在创建axios实例的时候设置公共的headers，也可以在每个请求中单独配置headers。

如果需要在每个请求中携带固定的headers，可以通过{' '}axios.defaults.headers.common{' '}来设置公共的headers。

// 设置公共的headers
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 发送请求时携带headers
axios.get(url, {
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'authorization': AUTH_TOKEN
  }
})

三、axios设置header解决跨域

在跨域请求中，如果没有特定的header设置，服务器可能会拒绝请求或者出现错误。我们可以通过在axios设置header来解决跨域问题。

针对特定的跨域问题，我们可以根据要求设置相关的header，比如在发送跨域请求时，可以设置{' '}Origin{' '}和{' '}Referer{' '}字段。

axios({
  method: 'post',
  url: 'http://api.example.com',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Origin': 'http://example.com',
    'Referer': 'http://example.com'
  },
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})

四、axios设置header无效

在使用axios设置header的过程中，可能会出现设置header无效的情况。这时，需要检查设置的header名字是否正确、大小写是否匹配、是否存在拼写错误等问题。

另外，如果有使用中间件对请求进行处理，也需要检查中间件是否对header进行了修改。比如，一些安全中间件会禁止一些特定的请求头，导致设置的header无效。

五、axios设置header不生效

在axios发送请求时，可能会出现设置header不生效的情况。这时，需要检查是否存在其他配置对请求头进行了覆盖。

比如，在axios发送post请求时，设置请求头为{' '}Content-Type: 'application/x-www-form-urlencoded'{' '}时，实际请求头却变成了{' '}Content-Type: 'application/json;charset=UTF-8'{' '}。这时，可能是因为axios默认对post请求设置了{' '}Content-Type: 'application/json;charset=UTF-8'{' '}。

解决这个问题，可以通过在请求的{' '}config{' '}中重新设置{' '}Content-Type{' '}字段。

axios.post(url, qs.stringify(data), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  transformRequest: [function (data) {
    // 这里重新设置Content-Type字段
    let newData = '';
    for (let k in data) {
      if (data.hasOwnProperty(k) === true) {
        newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&';
      }
    }
    return newData;
  }]
});

六、axios设置请求超时时间

在使用axios发送请求时，可能会遇到请求超时导致请求失败的问题。我们可以通过在{' '}config{' '}中设置{' '}timeout{' '}参数来设置请求超时时间。

例如，下面的代码设置请求超时时间为5000毫秒：{' '}

axios.get(url, {
  timeout: 5000
})

七、axios设置接口永不超时

在某些场景下，需要设置接口永不超时，这时可以通过设置{' '}timeout: 0{' '}来实现，表示请求永不超时。

然而，在实际生产中，一些接口可能会存在潜在的问题，如果请求一直不结束，会导致浏览器一直等待并且无法进行其他请求。因此，建议在使用{' '}timeout: 0{' '}前，先确认接口是否存在问题。

axios.get(url, {
  timeout: 0
})