【发布时间】：2021-06-10 05:15:26
【问题描述】：
我有一个 MERN 应用程序，其后端托管在 Heroku 上，前端托管在 netlify 上。部署应用程序后，我无法在浏览器中看到 cookie，但它在 localhost 上运行良好。我认为这是由于后端和前端端口不同，我缺少什么，请帮助
【问题讨论】：
标签： node.js reactjs heroku cookies netlify
【发布时间】：2021-06-10 05:15:26
【问题描述】：
你是对的。 Cookie 不是跨域兼容的。如果是这样，那将是一个严重的安全问题。解决问题的最简单方法是将 cookie 作为 res 对象发回，然后在前端手动设置 cookie。
以此为例。我将使用 JavaScript 样式的伪代码来执行此操作。不要复制粘贴它，因为这很可能不会立即起作用。这就是您要在后端执行的操作：
// 1. Authenticate the user.
const userData = await authenticateUser();
const userToken = await verifyUser(userData);
// 2. Return the response object.
return response.status(200).json({
status: 'success',
data: userData,
token: userToken,
});
在前端：
const response = await axios.post(...); // your API call, will return above object.
// set your authentication token here.
// the 'options' object will contain all possible cookie options, example would be 'secure'.
cookies.set('token', response.data.token, options);
// alternatively, set the cookie in the local storage.
localStorage.setItem('token', response.data.token);
您需要在前端相应地设置cookie。
延伸阅读：MDN Docs
编辑：您的问题不清楚。您第一次谈论 cookie，但现在您谈论的是 httpOnly cookie。请在您的问题中更具体。
如果是跨域的，在 React.js 中是无法设置 httpOnly cookie 的。 React 只对网站的“视图”负责。 httpOnly cookie 仅用于在服务器端设置。客户端 JavaScript 无法读取或设置该特定 cookie，但它能够发送它。除非您的 Netlify 中有可以进行服务器端操作的东西，否则我认为这是不可能的。
最好的办法是实际上只使用同一个域。
【讨论】：
-
我正在使用 httpOnly cookie，所以我可以设置 cookie 值，但我无法在反应中读取它的值，那么我将如何将 cookie 值发送到后端？由于后端位于不同的域中，因此我必须从前端发送 cookie 值，因为我无法直接在后端访问它。
-
我还没有尝试过，但您可能可以使用
axios的withCredentials选项，但您可能必须在后端设置CORS 及其来源。如果您使用不同的域，恐怕处理httpOnlycookie 有点困难。使用localStorage更容易。如果您使用 Next.js，您可以使用它的 API 路由来处理httpOnlycookie，但我们在这里讨论的是 React，而不是 Next.js。 -
那么如果我在 Axios 实例中将“withCredentials”选项设置为 true，那么 httpOnly cookie 是否会自动发送到后端而不在客户端读取它们？
-
应该是这样的。但是，您的服务器应配置为接受来自跨域的 cookie。这可以使用
cors来完成。我还没有尝试过 - 但它应该是可行的。 -
更新了我的答案。基本上，除非您在 Netlify 中有服务器端操作，否则这是不可能的。
httpOnlycookie 无法在前端访问。