使用ngrok暴露React应用时，设置的Cookie刷新或路由跳转后丢失

• 明确设置Cookie的domain属性
  ngrok生成的公网域名是类似xxx.ngrok.io的二级域名，默认情况下Express设置Cookie时不会自动带上匹配的domain，导致浏览器只把Cookie绑定到具体的子域名，刷新或跳转时就会丢失。修改Cookie配置，手动指定domain为.ngrok.io（前缀的点能匹配所有ngrok二级域名）：

  res.cookie("myCookie", "value", {
    secure: true,
    sameSite: 'None',
    maxAge: 1000 * 60 * 60,
    domain: '.ngrok.io'
  });
  

• 确保请求走HTTPS协议
  虽然ngrok会把HTTP请求转成HTTPS，但如果你的Express服务器本地监听的是HTTP端口，可能会出现请求头处理异常。可以在Express里加个中间件，强制ngrok的请求走HTTPS：

  app.use((req, res, next) => {
    if (req.headers['x-forwarded-proto'] === 'http') {
      return res.redirect(`https://${req.headers.host}${req.url}`);
    }
    next();
  });
  

• 检查React请求是否携带Credentials
  如果React用axios或fetch发请求到Express，必须开启携带凭证的配置，否则浏览器不会在跨域请求里带Cookie：
  // axios示例

  axios.get('/api/set-cookie', { withCredentials: true });
  

  // fetch示例

  fetch('/api/set-cookie', { credentials: 'include' });
  

• 确认Cookie的Path属性
  默认Path是/，如果你的Express路由在特定路径下，也可以明确设置Path为/，确保Cookie在所有路由下都有效：

  res.cookie("myCookie", "value", {
    secure: true,
    sameSite: 'None',
    maxAge: 1000 * 60 * 60,
    domain: '.ngrok.io',
    path: '/'
  });
  

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