如何从可信跨域API向shop.local域名设置Http Cookie？

核心问题本质 #

浏览器的Cookie同源策略明确限制：跨顶级域名（比如localhost和local属于不同顶级域）的服务，无法互相设置Cookie。你当前API部署在api.localhost，前端在front.shop.local，二者分属完全不同的域名体系，直接通过API响应设置Domain=shop.local的Cookie会被浏览器拦截，这不是CORS头配置或Cookie参数调整能解决的硬限制。

可行解决步骤 #

1. 统一域名后缀（最优方案） #

把API部署到https://api.shop.local，让前端和API同属shop.local父域：

• API响应设置Cookie时，指定Domain=.shop.local（开头的点表示匹配所有子域），同时带上Secure; HttpOnly; Path=/参数（HTTPS环境必须加Secure）
• 前端保持axios.defaults.withCredentials = true，CORS配置确保：
  • Access-Control-Allow-Origin设为具体的https://front.shop.local（不能用*）
  • Access-Control-Allow-Credentials设为true

2. 本地反向代理转发请求 #

如果不想修改API域名，在本地搭建反向代理，把前端对API的请求转发到目标地址：

• 比如用React项目的setupProxy.js配置示例：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://api.localhost',
      changeOrigin: true,
      secure: true
    })
  );
};

• 此时前端请求的是同域地址front.shop.local/api，API响应设置Cookie时指定Domain=front.shop.local或.shop.local即可生效。

3. 避坑提醒 #

不要尝试通过修改Cookie的Domain参数绕过顶级域限制，浏览器会严格校验Cookie的Domain是否与请求的服务器域名属于同一注册域，跨顶级域的Cookie设置请求会直接被忽略。

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