axios 中配置withCredentials

最新推荐文章于 2025-03-25 16:26:19 发布

爱宇阳

最新推荐文章于 2025-03-25 16:26:19 发布

阅读量3.2w

点赞数 16

分类专栏： Vue JavaScript 文章标签： axios

原文链接：https://blog.csdn.net/chjj0904/article/details/90268813

版权

Vue 同时被 2 个专栏收录

85 篇文章

订阅专栏

JavaScript

44 篇文章

订阅专栏

withCredentials 有什么用?

跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)，也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。

配置withCredentials:

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 环境变量base接口地址 url = base url + request url
  withCredentials: true, // 跨域请求时发送Cookie
  timeout: 60000, // 请求超时
  headers: {
    "Content-Type": "application/json; charset=UTF-8;"
  }
});

需要注意是，当配置了xhr.withCredentials = true时，必须在后端增加 response 头信息Access-Control-Allow-Origin，且必须指定域名，而不能指定为*。

如果在同域下配置xhr.withCredentials，无论配置true还是false，效果都会相同，且会一直提供凭据信息(cookie、HTTP认证及客户端SSL证明等)

Access-Control-Allow-Credentials 响应头表示是否可以将对请求的响应暴露给页面。返回true则可以，其他值均不可以。

Access-Control-Allow-Credentials 头工作中与XMLHttpRequest.withCredentials 或Fetch API中的Request() 构造器中的credentials 选项结合使用。Credentials必须在前后端都被配置（即the Access-Control-Allow-Credentials header 和 XHR 或Fetch request中都要配置）才能使带credentials的CORS请求成功。