Node.js 在ReactJs应用程序上从nodejs服务器发送cookie

Node.js 在ReactJs应用程序上从nodejs服务器发送cookie,node.js,reactjs,cookies,Node.js,Reactjs,Cookies,如果我需要从nodejs向react应用程序发送cookie,那么这两个应用程序应该位于相同的端口上在服务器上执行此操作:res.cookie('token',token,{httpOnly:true})如果我有相同的端口,我可以在前端发送cookie,但是如果两个应用都在相同的端口上,就会出现问题,因为如果我在前端访问,例如http://localhost:4001/login而且我的服务器也在http://localhost:4001,我可以得到404错误,因为这样我可以访问服务器路由htt

如果我需要从nodejs向react应用程序发送cookie,那么这两个应用程序应该位于相同的
端口上

在服务器上执行此操作:
res.cookie('token',token,{httpOnly:true})

如果我有相同的端口,我可以在前端发送cookie,但是如果两个应用都在相同的端口上,就会出现问题,因为如果我在前端访问,例如
http://localhost:4001/login
而且我的服务器也在
http://localhost:4001
,我可以得到404错误,因为这样我可以访问服务器路由
http://localhost:4001/login
不是前端。
问题:那么,当路由相互干扰时,如何解决此问题,并能够发送cookie?解决方案之一是使用域而不是端口

为此,您可以通过端口转发在本地启动边缘web服务器(例如Nginx或Apache),并设置从域到本地主机的映射

此外,您还可以使用多种服务中的一种,这些服务可以将您的本地web服务器公开给Internet。也许这对你来说是最简单的。以下是您可以应用以解决问题的操作顺序:

步骤1

在两个不同的端口上运行前端和后端应用程序,例如4001用于后端应用程序,4002用于前端应用程序。作为该步骤的结果,您必须确保这两个应用都已启动并正在运行,并且可以通过端口访问

步骤2

注册并安装或任何其他服务,这些服务可以使用域将您的本地应用公开到internet。 如果您选择ngrok,我的建议是编写一个配置文件并将其放置在默认位置。(配置文件的默认位置取决于您的操作系统-以下是指向文档的链接:)

以下是配置文件的示例:

authtoken: // place your ngrok access token here

region: eu

tunnels:
  frontend_app:
    proto: http
    addr: 4002

  backend_app:
    proto: http
    addr: 4001
不要忘记放置您的authtoken,要获得一个您必须注册的authtoken

有关设置ngrok的更多信息,请查看官方文档:

因此,在启动ngrok后,您必须在控制台中获得下一个输出:

Forwarding                    http://569de0ddbe4c.ngrok.io -> localhost:4002
Forwarding                    https://93b5cdf7c53f.ngrok.io -> localhost:4001
并且能够通过生成的外部地址访问您的本地应用程序

步骤3

您必须做的最后两件事是:

  • 用前端应用程序中的外部URL(在我的示例中)替换API端点
  • 调整后端应用程序中的res.cookie调用以允许从两个域访问cookie:
    res.cookie('token',token,{httpOnly:true,domain:'ngrok.io'})

  • 就这样。现在,您的应用程序可以通过不同的第三级域通过共享cookie从Internet访问。

    谢谢您的回答。我想问你是否有其他解决办法?一些简短的东西,没有在真正的服务器上添加我的应用程序,但是一些我可以在本地使用的东西你应该在两个不同的端口上运行你的应用程序-这应该会有帮助。Cookie不提供端口隔离,因此您可以从运行在不同端口的前端应用程序访问它们。但根据文档,只有当应用程序位于相同端口时,Cookie才会从后端发送到前端。但是如果我在相同的端口上运行,我会遇到上面解释的问题。我不确定这是一个正确的信息。请检查您在上面共享的文章中的文档,作者建议在CRA中使用“代理”选项-您可以在CRA文档中了解更多信息: