如何解决跨域请求中 Cookie 设置后浏览器不自动发送的问题

云浩同学_3043

云浩同学_3043

2026-09-08

769人浏览

原创

如何解决跨域请求中 Cookie 设置后浏览器不自动发送的问题

本文详解跨域场景下 Cookie 无法自动携带的根本原因及正确解决方案:必须在首次设置 Cookie 的请求(如 POST /verifyToken)中显式启用 withCredentials: true,否则浏览器将拒绝存储该 Cookie,后续请求自然无法发送。

本文详解跨域场景下 cookie 无法自动携带的根本原因及正确解决方案:必须在**首次设置 cookie 的请求(如 post /verifytoken)中显式启用 `withcredentials: true`**,否则浏览器将拒绝存储该 cookie,后续请求自然无法发送。

在基于 CORS 的跨域认证流程中(例如前端 dev.mydomain.com/myApp 调用 second.mydomain.com 的接口),一个常见却极易被忽视的陷阱是:Cookie 的设置与后续携带是两个强耦合但独立触发的行为。许多开发者误以为只要响应头中包含 Set-Cookie,且客户端后续请求启用了 withCredentials: true,Cookie 就能自动生效——但事实并非如此。

关键规则在于:浏览器仅在“已标记为可携带凭证”的请求所收到的响应中,才会接受并持久化 Set-Cookie。换句话说,如果初始 POST https://second.mydomain.com/verifyToken 请求未携带 credentials(即未设置 withCredentials: true),即使服务端返回了合法的 Set-Cookie 头(含 Secure; HttpOnly; SameSite=None),现代浏览器(Chrome ≥80、Firefox、Safari)也会静默忽略该 Cookie,不予存储。因此,后续 GET /refresh 即使正确配置 withCredentials: true,也因本地无对应 Cookie 而无法发送。

✅ 正确做法(两步缺一不可):

  1. 首次请求(设置 Cookie)必须启用凭证

    // ✅ 正确:verifyToken 请求也需 withCredentials: true
    axios.post('https://second.mydomain.com/verifyToken', data, {
      withCredentials: true, // ← 关键!此处必须开启
      headers: { 'Content-Type': 'application/json' }
    });
  2. 后续请求(使用 Cookie)同样启用凭证

    NotebookLM CLI Cookies
    NotebookLM CLI Cookies

    使用 nlm CLI 检索并回答已上传至 NotebookLM 的文档问题。适用于用户需要查找信息、总结来源或查询特定笔记本时。

    下载
    // ✅ 正确:refresh 请求保持启用
    axios.get('https://second.mydomain.com/refresh', {
      withCredentials: true // ← 保持一致
    });

⚠️ 同时需确保服务端响应头严格匹配:

  • Access-Control-Allow-Origin 必须为具体源(如 https://dev.mydomain.com),不可为 *;
  • Access-Control-Allow-Credentials: true 必须存在;
  • Set-Cookie 头需包含:
    • Secure(仅 HTTPS 传输);
    • SameSite=None(跨域必需);
    • HttpOnly(可选,但推荐用于敏感 Token);
    • Path=/refresh 或更宽泛的 Path=/(确保路径匹配)。

? 额外验证建议:

  • 使用浏览器开发者工具 → Application → Cookies 标签页,检查 second.mydomain.com 下是否真实存在 refreshToken Cookie;若不存在,说明首次请求未成功设置;
  • 检查 Network 面板中 verifyToken 请求的 Request Headers,确认 Origin 和 Cookie 字段(首次无 Cookie 是正常的,但需有 Sec-Fetch-Mode: cors);
  • 确保 dev.mydomain.com 和 second.mydomain.com 属于同一注册域名(如均为 mydomain.com 子域),否则 Domain= 属性可能需显式指定(如 Domain=mydomain.com),但本例中非必需。

总结:跨域 Cookie 的生命周期始于“受信请求”,而非“响应头”。牢记——没有 withCredentials: true 的设置请求,就没有可被发送的 Cookie。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

cookie 浏览器

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

2400

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

340

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2233

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1141

6

cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

2023.06.30

10999

10

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.23

946

5

阻止所有cookie什么意思
阻止所有cookie什么意思

阻止所有cookie意味着在浏览器中禁止接受和存储网站发送的cookie。阻止所有cookie可能会影响许多网站的使用体验,因为许多网站使用cookie来提供个性化服务、存储用户信息或跟踪用户行为。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.02.23

724

5

cookie与session的区别
cookie与session的区别

本专题整合了cookie与session的区别和使用方法等相关内容,阅读专题下面的文章了解更详细的内容。

2025.08.19

1826

14

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
php注册登录系统开发实战
php注册登录系统开发实战

共10课时 | 13.8万人学习

PHP基于Cookie的购物车模块设计
PHP基于Cookie的购物车模块设计

共10课时 | 11.1万人学习

第三期培训_PHP开发
第三期培训_PHP开发

共116课时 | 32.3万人学习