axios.defaults.withCredentials跨域携带cookie

最新推荐文章于 2023-06-13 20:27:40 发布

瑆箫

最新推荐文章于 2023-06-13 20:27:40 发布

阅读量1.6k

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/mo3408/article/details/124745907

版权

web前端技术同时被 3 个专栏收录

274 篇文章 12 订阅 ¥129.90 ¥299.90

订阅专栏

超级会员免费看

后端

260 篇文章 13 订阅 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

web

205 篇文章 8 订阅 ¥129.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了在axios中如何设置withCredentials为true以在跨域请求中携带cookie，同时强调了后端需要配合设置Access-Control-Allow-Origin响应头，且不能设置为通配符*。

摘要由CSDN通过智能技术生成

withCredentials:默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。前端通过将withCredentials属性设置为true指定某个请求应该发送凭据

withCredentials默认值为false。
true：在跨域请求时，会携带用户凭证
false：在跨域请求时，不会携带用户凭证；返回的 response 里也会忽略 cookie

注意：当配置了 withCredentials = true时，必须后端配置增加 response 头信息Access-Control-Allow-Origin，且必须指定域名，而不能指定为*
如果后端需要带cookie过去，前端需要设置为true

// 服务端需要配置：
// 响应头表示是否可以将对请求的响应暴露给页面
Access-Control-Allow-Credentials: true
// 允许跨域操作的具体域名
Access-Control-Allow-Origin: "http://localhost:8080"
// 允许跨域的HTTP方法
Access-Control-Allow-Methods: ["GET","POST","DELETE"]
// 列出将会在正式请求的 Access-Control-Expose-Headers 字段中出现的首部信息
Access-Control-Allow-Headers: ["Content-Type", "Authorization", "Accept"]

// 前端需要配置：
// 表示跨域请求时是否需要使用凭证
axios.defaults.withCredentials = true