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);
2条答案
按热度按时间e5nqia271#
你说得对。Cookie不跨域兼容。如果是的话,这将是一个严重的安全问题。解决问题的最简单方法是将cookie作为
res
对象发送回来,然后在前端手动设置cookie。就拿这个来说吧。我将使用JavaScript风格的伪代码来实现这一点。不要复制粘贴这个,因为这很可能不会立即工作。这就是你要在后端做的:
在前端:
您需要在前端相应地设置cookie。
进一步阅读:MDN Docs
编辑:您的问题不清楚。第一次你谈论的是cookie,但现在你谈论的是
httpOnly
cookie。请你的问题更具体些。如果React.js是跨域的,则不可能在React.js中设置
httpOnly
cookie。React只对网站的“视图”负责。httpOnly
cookie仅用于服务器端设置。客户端JavaScript无法读取或设置该特定cookie,但可以发送该cookie。除非您的Netlify中有可以进行服务器端操作的东西,否则我认为这是不可能的。你最好的办法是实际上只是使用相同的域。
1cklez4t2#
我也面临着同样的问题。问题是成功登录/注册后,浏览器中未设置Cookie。我需要在cookie中设置会话ID,以便在每次CRUD/RESTful API调用时检查用户身份验证。
由于没有设置cookie,我的API请求调用不包括它,用户虽然成功登录,但没有经过身份验证。因此用户无法访问需要基于会话的身份验证的页面。当然我的整个应用程序都依赖于它。
问题是,我们正在为后端和前端使用不同的域。默认情况下,出于安全原因,Chrome或其他浏览器不会为在另一个域名上托管API调用的网站(前端)设置Cookie。我不知道这些浏览器是如何停止设置cookie的,但如果我们不指定某些选项,它们肯定会这样做。
当我们为react应用程序使用http://localhost:3000,为后端使用http://localhost:7000时,这可以正常工作。但是当我们在云上部署时,问题就来了。我做了几件事来帮助我解决这个问题。我将用简单的步骤来说明,特别是在这个确切的问题部分,假设你已经正确地做了其他的事情。
以下是对我有效的步骤。看到这些箭头
⬅️⬅️
标记我所指的地方。在前端React应用程序中执行(步骤1 - 2)
步骤1:在
react app
中的package.json
文件中设置proxy
。这会告诉你的React应用在任何不完整的URL(如"/update/:noteid"
)之前包含这个代理URL。如果URL包含类似http
的内容,则代理不会设置默认代理值。STEP2:添加
"credentials" : "include"
API fetch,如下所示你可以在这里学习获取www.example.com https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#sending_a_request_with_credentials_included
在BACKEND NODE.JS应用程序中执行
STEP 3:在node.js(或后端应用程序)你需要在
app.js
(或你的主文件运行服务器)中install cors
如果你不知道cors是什么你可以从这里学习https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS或者你可以看视频看视频:https://www.youtube.com/watch?v=CvKPeWojukc&t=410s
要做到这一点
1.使用-->
npm i cors
安装corsconst cors = require("cors");
中需要内核步骤4:在应用程序中使用cors并传递一些参数,如下面的示例所示,以及代理设置,如下面的代码所示。在添加
cors
选项后,不要忘记添加app.set("trust proxy",1);
这基本上允许您的服务器接受来自特定域名的请求,该域名是您的前端网站(在本例中为
https://yourfrontendurl.com
)托管的域名。步骤5:设置会话(我想你已经熟悉了),并通过cookie的设置如下
我还假设你正在正确地做其他事情,比如设置mongoDB连接等。这也是我的
first answer in stack overflow
。请let me know
如果我在某处做wrong
。我会很高兴知道这一点。你也可以在下面看到我的项目页面,其中涉及到这个特定的问题解决方案。我的package.json文件--> https://github.com/satyadalei/mynotepedia-frontend/blob/main/package.json
我的app.js文件--> https://github.com/satyadalei/mynotepedia/blob/main/app.js