Chrome 不会在 React 应用中保存 Express cookie答案

【问题标题】：Chrome doesn't save Express cookie in React appChrome 不会在 React 应用中保存 Express cookie
【发布时间】：2021-10-17 09:50:10
【问题描述】：

我从我的 Express 应用接收 cookie，没有任何警告，但是 cookie 从未被存储（通过 Chrome 开发工具确认）。

我已经设置了一个 React 应用和 express API：

API： https://api.mycompany.com (express: 4.17.1)

应用程序： https://app.mycompany.com （react 17.0.2 和 superagent HTTP 库。）

在我的 React 代码中，我向 https://api.mycompany.com/get_cookie 发出请求：

// setup the agent ...
const agent = request
      .agent()
      .use(prefix('https://api.mycompany.com'))
      .set('Content-Type', 'application/json');

// make the request (confirmed response OK)
await agent
      .post('/get_cookie')
      .send(queryParams)
      .withCredentials();

我在响应标头中看到了 cookie（没有警告！）

Set-Cookie: my_token=<token-content>; Max-Age=604800; Path=/; Expires=Sat, 21 Aug 2021 14:17:13 GMT; Secure; SameSite=None

在我的服务器上 (https://api.mycompany.com)：

设置 CORS

app.use(cors({
  origin: true, // reflect request origin
  credentials: true
}));
app.options('*', cors());  // enable pre-flight?

发送 cookie

// from /get_cookie:

res.cookie('my_token',
  JSON.stringify(<token-content>),
  {
    maxAge: 10 * 60_000, // 10 mins
    httpOnly: false,
    signed: true,
    secure: true,
    sameSite: 'none'
  });

用这个真的很难，有点茫然？？？？为什么我的浏览器不存储 cookie？我已经在 Firefox 中测试过，我也遇到了同样的问题。任何帮助将不胜感激！

【问题讨论】：

你确定你检查的是https://api.mycompany.com域上的cookies而不是你的react应用域上的吗？如果您使用的是 chrome，请转到 chrome://settings/siteData 并搜索您的服务器域。
@AsadJivani 我刚刚看了看，我看到的只是“app.company.com 本地存储的数据”
奇怪，这可能与域混淆有关，您是否尝试过将域作为您的 cookie 属性传递，例如 domain: '.yourcompany.com'，这将允许所有子域使用您的 cookie。
好吧，我已经涵盖了几乎所有的内容，但您可以尝试的最后一件事是从超级代理切换到 Axios 或获取 API，希望它会有所帮助。祝你好运。
@AsadJivani 我设法找出了解决方案，但您的故障排除帮助很大，所以谢谢！！！

标签： reactjs express google-chrome cookies cross-domain

【解决方案1】：

我将withCredentials() 调用移至代理本身。出于某种原因，这成功了：

const agent = request
      .agent()
      .use(prefix('https://api.mycompany.com'))
      .set('Content-Type', 'application/json')
      .withCredentials();

【讨论】：