React+Node.js/Express项目Cookie在浏览器Application面板不显示的问题

问题原因 #

这种情况本质是跨域请求下的Cookie配置不完整，浏览器虽接收到Cookie，但出于安全策略未将其存入本地存储：

• 前端fetch默认不会主动携带/接收Cookie，浏览器不会保存未明确允许接收的Cookie
• 后端未配置CORS允许跨域凭证传递，且Cookie的安全属性（SameSite、Secure）不符合浏览器存储规则
• Network面板能看到Cookie是因为浏览器确实收到了响应头，但安全策略阻止它写入Application的Cookie存储区

解决方案 #

1. 后端Express配置调整

先安装CORS中间件，再修正Cookie设置参数：

const express = require('express');
const cors = require('cors'); // 执行 npm i cors 安装
const app = express();
const ProductModel = require('../Schemas/productSchema')

const product = ProductModel;

// 配置CORS，允许前端域名的跨域请求并开启凭证传递
app.use(cors({
  origin: 'http://localhost:3000', // 替换为你的React项目运行端口
  credentials: true // 允许跨域传递Cookie、HTTP认证等凭证
}));

// 注意：后端路由要和前端请求的/products对应
app.get('/products', (req, res) => {
  try {
    product.find(function(err, data){
      if(data){
        // 设置符合安全规则的Cookie属性
        res.cookie("test", "test1", {
          httpOnly: true, // 防止XSS攻击，推荐开启
          sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax', // 生产环境配合Secure用none，开发环境用lax
          secure: process.env.NODE_ENV === 'production', // 生产环境HTTPS下开启，开发环境HTTP下关闭
          maxAge: 24 * 60 * 60 * 1000 // Cookie有效期，可选配置
        });
        res.send(data);
      }
      else{
        res.json({message : err});
      }
    })
  } catch (error) {
    res.json({message : error});
  }
})

2. 前端React的fetch请求调整

在fetch中添加credentials: 'include'，明确允许跨域请求携带/接收Cookie：

useEffect(() => {
  async function fetchData(){
    await fetch('http://localhost:5000/products', {
      credentials: 'include' // 关键配置：开启跨域Cookie传递
    })
    .then(res => res.json())
    .then(data =>{
      // setProducts(data.data);
    })
    .catch(err => console.log(err))
  }
  fetchData();
}, [])

验证步骤 #

1. 重启后端和前端服务
2. 发起请求后，查看Chrome开发者工具的Application→Cookies→http://localhost:5000，即可看到test Cookie

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