本地开发React应用时，如何向api.example.com发送.example.com域名Cookie？

核心问题分析 #

你的本地应用weblocal.example.com与生产APIapi.example.com属于同主域下的不同子域，浏览器的同源策略和Cookie安全属性限制了跨子域请求时的Cookie发送；加上本地开发默认使用HTTP协议，无法携带生产环境的Secure类型Cookie，最终导致请求头中没有Cookie。

具体解决步骤 #

1. 本地开发启用HTTPS #

生产环境的Cookie带有Secure属性（默认配置下生产环境CookieSecurePolicy为Always），只有HTTPS环境下浏览器才会发送这类Cookie。

在React项目中开启HTTPS：

• 直接通过命令启动：

  HTTPS=true npm start
  

• 或者在项目根目录创建.env.development文件，添加配置：

  HTTPS=true
  

启动后本地应用会以https://weblocal.example.com:3000（端口根据项目配置调整）运行。

2. 配置代理转发请求 #

通过代理将本地请求转发到生产API，让浏览器认为请求属于同域，自动携带.example.com域的Cookie。

在React项目的package.json中添加代理配置：

"proxy": "https://api.example.com"

修改你的fetch请求代码，改为请求本地路径：

fetch("/api/your-endpoint", { credentials: 'include' })

此时本地请求会被自动转发到https://api.example.com/api/your-endpoint，浏览器会将.example.com的Cookie携带到请求中。

3. 调整生产API的Cookie属性（若代理方案无效） #

若代理后仍无法携带Cookie，需确认生产API的Cookie配置是否支持跨域发送：
在API的Cookie配置中添加以下设置（生产环境生效）：

options.Cookie.SameSite = Microsoft.AspNetCore.Http.SameSiteMode.None;
options.Cookie.SecurePolicy = CookieSecurePolicy.Always;

注意：设置SameSite=None必须同时启用Secure属性，否则浏览器会拒绝存储该Cookie。

4. 临时浏览器调试设置（仅用于测试） #

如果不想修改生产API配置，可以临时关闭浏览器的SameSite安全限制来测试：

• Chrome：地址栏输入chrome://flags/#same-site-by-default-cookies，将SameSite by default cookies和Cookies without SameSite must be secure设为Disabled，重启浏览器。
• Firefox：地址栏输入about:config，搜索network.cookie.sameSite.laxByDefault，设置为false。
  ⚠️ 此方法仅用于临时调试，日常浏览需恢复默认设置，避免安全风险。

内容的提问来源于stack exchange，提问作者MasterLuV