如何通过Express为React浏览器设置Cookie？Post/Get请求问题解决

服务端代码（app.js） #

const express = require("express")
const cors = require("cors")
const bodyParser = require("body-parser");

const app = express();
app.use(express.json())
app.use(cors())

app.post('/getcookies', (req, res)=>{
    res.cookie('test', 'jwt', {expiresIn : "2h", httpOnly : false, secure : false, strict : "none"}).status(200).json({how : "done"});
})

app.listen(7000, ()=>{
    console.log("success...");
})

异常现象 #

• Postman发送POST请求到http://localhost:7000/getcookies，无Set-Cookie响应头，Cookie无法设置
• 改为GET请求，直接在浏览器访问http://localhost:7000/getcookies，Cookie设置成功
• React项目（http://localhost:3000/）通过按钮点击用Axios发POST请求，浏览器网络面板可见Set-Cookie头，但Cookie未实际写入

1. 配置跨域允许凭证 #

跨域请求时，浏览器默认不会携带/保存Cookie，需服务端和客户端同步配置：

• 服务端修改CORS配置：
  将app.use(cors())替换为：

  app.use(cors({
    origin: "http://localhost:3000", // 明确允许React项目的域名，不能用*
    credentials: true // 开启凭证携带权限，包含Cookie、HTTP认证等
  }))
  

• 客户端Axios请求配置：
  发起请求时添加withCredentials: true：

  axios.post('http://localhost:7000/getcookies', {}, {
    withCredentials: true
  })
  

2. 修正Cookie参数错误 #

Express的res.cookie不存在expiresIn和strict参数，需调整：

res.cookie('test', 'jwt', {
  maxAge: 2 * 60 * 60 * 1000, // 2小时，单位毫秒，替代错误的expiresIn
  httpOnly: false,
  secure: false,
  sameSite: "lax" // 替代错误的strict: "none"，开发环境用lax/strict即可
})

注：若生产环境需跨域跨站点传递Cookie，再设置sameSite: "none"，但此时必须搭配secure: true（仅HTTPS环境生效）

3. Postman使用Cookie的注意事项 #

• 开启Postman的Cookie功能：进入Settings > Cookies，勾选Enable Cookies
• 确保请求的Content-Type为application/json（匹配服务端express.json()解析规则）

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