跨端口场景下如何从React客户端服务访问服务端设置的Cookie

你遇到的问题本质是跨源限制：localhost的3000端口和8000端口属于不同源，浏览器默认会阻止跨源请求写入、携带Cookie，当前Cookie仅存储在8000端口对应的域下，3000端口的客户端自然无法读取。

按以下三步调整即可解决： #

1. 修正服务端Cookie配置 #

补充domain和sameSite属性，统一Cookie归属的根域名：

res.cookie("jwt",token,{
  expires: new Date(Date.now()+99999999), // 注意你原代码这里缺少右括号，需要补全
  httpOnly: true,
  sameSite: 'Lax', // 本地HTTP开发场景用Lax即可，HTTPS跨域场景可设为None
  domain: 'localhost' // 根域名统一为localhost，两个端口的服务都能匹配到该Cookie
})

2. 配置服务端CORS规则 #

必须明确指定允许的客户端源，禁止使用*通配符，同时开启凭证支持：
以Express框架为例：

const cors = require('cors')
app.use(cors({
  origin: 'http://localhost:3000', // 明确写客户端的完整地址，不能用*
  credentials: true // 允许跨域请求携带、写入Cookie等凭证信息
}))

3. 调整前端请求配置 #

所有发往8000端口的请求都要开启凭证携带开关，否则浏览器会忽略响应中的Set-Cookie头，也不会主动携带Cookie：

• 如果你用Axios发送请求：

// 单次请求配置
axios.get('http://localhost:8000/你的接口路径', {
  withCredentials: true
})
// 也可以全局配置，避免每个请求都写：axios.defaults.withCredentials = true

• 如果你用原生Fetch发送请求：

fetch('http://localhost:8000/你的接口路径', {
  credentials: 'include'
})

补充注意：后续上线部署到正式域名时，需要对应调整domain、CORS的origin参数，HTTPS环境下如果设置sameSite: None，必须同时添加secure: true的Cookie配置。

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