如何向跨域客户端网站（如http://192.168.1.111:3000）写入Cookie？

问题根源 #

你的问题出在三个核心点：

• 跨域场景下浏览器的Cookie安全限制未被正确配置
• HTTP环境下Cookie被要求使用Secure属性（但你没开启HTTPS）
• 301重定向可能导致Cookie在跳转过程中丢失或触发校验失败

分步解决 #

1. 修正Cookie配置 #

使用res.cookie时必须添加跨域相关参数，示例代码：

res.cookie("cookie", "hello", {
  domain: "192.168.1.111:3000", // 精确匹配前端域名/IP+端口
  httpOnly: false, // 若需前端JS读取则设为false，否则保持true更安全
  secure: false, // HTTP环境下必须关闭，HTTPS环境开启
  sameSite: "None", // 允许跨域携带Cookie
  path: "/" // 确保Cookie在全站生效
});

提示：如果需要支持多个前端域名，可动态获取请求头的Origin并校验后设置domain，生产环境避免用通配符。

2. 处理301重定向 #

301永久重定向会打断Cookie的正常传递：

• 检查后端路由配置，移除不必要的重定向规则，直接返回响应
• 若必须重定向，确保重定向后的响应也携带相同的Cookie配置
• 测试时直接请求目标接口，跳过重定向环节验证Cookie是否生效

3. 前端请求配置 #

前端发送请求时必须明确携带凭证：

• Axios示例：

axios.get('http://你的后端接口地址', {
  withCredentials: true
});

• 原生Fetch示例：

fetch('http://你的后端接口地址', {
  credentials: 'include'
});

4. 后端开启CORS支持 #

用Express的cors中间件配置跨域允许：

const cors = require('cors');
app.use(cors({
  origin: "http://192.168.1.111:3000", // 允许的前端域名
  credentials: true // 允许请求携带Cookie
}));

开发环境额外提示 #

Chrome等浏览器在HTTP环境下对sameSite: None有限制，可临时关闭安全校验（仅开发用）：

• 地址栏输入chrome://flags/#same-site-by-default-cookies，设置为Disabled

生产环境必须切换到HTTPS，此时将secure设为true，sameSite: "None"才能正常生效。

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