无法从MERN应用程序中的后端在浏览器中接收/设置cookie，后端托管在heroku上，而前端托管在netlify上 [英] Not able to receive/set cookies in browser from backend in MERN app with backend hosted on heroku and frontend on netlify

问题描述

我有一个MERN应用，其后端托管在Heroku上，前端托管在netlify上.部署应用程序后，我无法在浏览器中看到cookie，但是在localhost上可以正常工作.我认为这是由于后端和前端端口不同所致，我缺少什么，请帮忙

I have a MERN app whose backend is hosted on Heroku and frontend on netlify. I am not able to see the cookies in the browser after deploying the app but it works fine on localhost. I think it is due to different backend and frontend ports, what am I missing, please help

推荐答案

您是正确的.Cookies不跨域兼容.如果是这样，那将是一个严重的安全问题.解决问题的最简单方法是将cookie作为 res 对象发送回去，然后在前端手动设置cookie.

You are correct. Cookies are not cross-domain compatible. If it was, it would be a serious security issue. The easiest way to fix your problem would be to send back the cookie as a res object, and then setting the cookie manually in the frontend.

以这个为例.我将使用JavaScript样式的伪代码来完成此操作.不要复制粘贴此内容，因为这很可能无法立即生效.这是您要在后端执行的操作:

Take this for example. I'll do this with JavaScript style pseudocode. Don't copy paste this as this most likely wouldn't work right away. This is what you're going to do on the back-end:

// 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.

You need to set the cookie accordingly in the front-end.

进一步阅读: MDN文档

编辑:您的问题不清楚.第一次您谈论Cookie，但现在您谈论的是 httpOnly cookie.请更具体地回答您的问题.

EDIT: Your question is unclear. First time you talked about cookies, but now you're talking about httpOnly cookies. Please be more specific in your questions.

如果是跨域的，则无法在React.js中设置 httpOnly cookie.React只负责网站的视图". httpOnly cookie只应在服务器端设置.客户端JavaScript无法读取或设置特定的cookie，但可以发送它.除非您在Netlify中有可以执行服务器端操作的功能，否则我认为这是不可能的.

It is impossible to set httpOnly cookies in React.js if it is cross-domain. React is only responsible for the 'view' of the website. httpOnly cookies are only meant to be set server-side. Client-side JavaScript cannot read or set that specific cookie, but it is able to send it. Unless you have something in your Netlify that can do server-side operations, I don't think that is possible.

您最好的选择是实际上只是使用相同的域.

Your best bet is to actually just use the same domain.

这篇关于无法从MERN应用程序中的后端在浏览器中接收/设置cookie，后端托管在heroku上，而前端托管在netlify上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！