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

Question

我有多红 here，如果我需要从 nodejs 发送 cookie 来响应应用程序，两个应用程序都应该在同一个 port 上。
在服务器上执行此操作：res.cookie('token', token, { httpOnly: true });
我可以发送如果我有 same 端口，则前端的 cookie，但如果两个应用程序都在 same 端口上，则会出现问题，因为如果我在前端访问例如http://localhost:4001/login，我的服务器也在http://localhost:4001，我会得到404错误，因为这样我访问的服务器路由http://localhost:4001/login不是前端。
问题： 那么当路由相互混淆并能够发送cookie时如何解决这个问题？

Answer 1

其中一种解决方案是使用域而不是端口。

为此，您可以使用端口转发在本地（例如 Nginx 或 Apache）启动边缘 Web 服务器，并设置从您的域到本地主机的映射。

此外，您可以使用可以将本地 Web 服务器公开到 Internet 的众多服务之一。对您来说，这可能是最简单的一个。以下是您可以申请解决问题的操作顺序：

第 1 步

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

第 2 步

注册并安装https://ngrok.com/ 或任何其他可以将您的本地应用程序通过域公开到互联网的服务。 如果您会选择 ngrok，我的建议是编写一个配置文件并将其放在默认位置。 （配置文件的默认位置取决于您的操作系统 - 这是文档的链接：https://ngrok.com/docs#config-default-location）

这是一个配置文件的例子：

authtoken: // place your ngrok access token here

region: eu

tunnels:
  frontend_app:
    proto: http
    addr: 4002

  backend_app:
    proto: http
    addr: 4001

不要忘记放置您的 authtoken，您必须注册才能获得。

更多关于设置ngrok的信息，请查看官方文档：https://ngrok.com/docs#getting-started-expose https://ngrok.com/docs#tunnel-definitions

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

Forwarding                    http://569de0ddbe4c.ngrok.io -> localhost:4002
Forwarding                    https://93b5cdf7c53f.ngrok.io -> localhost:4001

并且能够通过生成的外部地址访问您的本地应用程序。

第三步

你必须做的最后两件事是：

1. 将您的 API 端点替换为前端应用中的外部 URL（在我的示例中为 https://93b5cdf7c53f.ngrok.io）。
2. 调整后端应用程序中的 res.cookie 调用，以便可以从两个域访问 cookie：res.cookie('token', token, { httpOnly: true , domain: 'ngrok.io' })

就是这样。现在，您的应用程序可以通过不同的三级域通过 Internet 访问，并且它们之间共享 cookie。