服务器发送Cookie至浏览器后，无法在开发者工具Application面板查看的问题

问题描述 #

在学习Cookie工作机制时，我用React前端调用Express后端的/check接口，服务器返回了Set-Cookie响应头（Network面板能看到），但在开发者工具的Application > Cookies路径下找不到这个Cookie。点击按钮后前端控制台能正常打印"Cookie set successfully"，但就是看不到Cookie被存储。

前端App.js代码 #

function App() {

  async function Check() {
    const response = await fetch("http://localhost:5000/check", {
      method: "GET",
    });
    const data = await response.text();
    console.log(data);
  }

  return (
    <div className="App">
      <button onClick={Check}>CheckCookie</button>
    </div>
  );
}

export default App;

后端服务器代码 #

const express = require('express');
const cors = require('cors');
const app = express();

app.use(express.json());
app.use(express.urlencoded({extended:false}));

app.use(cors());

app.get('/', (req,res)=>{
    res.send("Website Server");
})

app.get('/check', cors(), async (req, res) => {
  res.cookie('cookieName', 'SUCCESSFULL', {
      maxAge: 900000,
      httpOnly: false,
      secure: false,
      sameSite: 'Strict',
      domain: 'localhost'
   });
    res.send('Cookie set successfully');
});
  

app.listen(5000, () => console.log('Running on port 5000'));

原因分析 #

核心问题是跨域请求的Cookie存储限制：React默认运行在localhost:3000，服务器在localhost:5000，属于不同端口的跨域场景。默认情况下：

1. 前端fetch请求没有开启凭证携带权限，浏览器不会处理跨域返回的Cookie；
2. 后端CORS配置没有明确允许携带凭证，即使返回Set-Cookie头，浏览器也会忽略。

解决方法 #

必须同时修改前后端代码，让浏览器允许跨域场景下存储Cookie：

1. 前端修改fetch请求 #

给fetch添加credentials: 'include'选项，明确允许携带凭证：

async function Check() {
  const response = await fetch("http://localhost:5000/check", {
    method: "GET",
    credentials: 'include' // 关键配置：允许跨域携带凭证
  });
  const data = await response.text();
  console.log(data);
}

2. 后端修改CORS配置 #

将全局CORS配置改为指定前端地址，并开启凭证允许：

// 替换原来的app.use(cors());
app.use(cors({
  origin: 'http://localhost:3000', // 你的React应用运行地址
  credentials: true // 允许跨域请求携带凭证
}));

// 去掉/check接口上重复的cors()中间件
app.get('/check', async (req, res) => {
  res.cookie('cookieName', 'SUCCESSFULL', {
      maxAge: 900000,
      httpOnly: false,
      secure: false,
      sameSite: 'Strict',
      domain: 'localhost'
   });
    res.send('Cookie set successfully');
});

额外检查项 #

• 确认浏览器没有禁用Cookie，也没有开启隐私模式；
• 如果生产环境使用HTTPS，需要把secure设为true，sameSite设为None（开发环境用HTTP时secure必须是false）；
• domain要和前端地址一致，用localhost在开发环境没问题。

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