如何将 NextJS 应用程序与现有 Node.js 后端一起使用？

Question

目前我有一个与我的 create-react-app 项目一起工作的现有 Node.js 后端。
我正在迁移到 NextJS，但有一些问题。

我有一个简单的 JWT 认证流程：

前端向 my-server/api/auth
后端验证用户，将刷新令牌作为 httpOnly cookie 添加到响应 header。和 returns 访问令牌作为响应 body.
对服务器的每次下一次调用都将在 cookie 中包含访问令牌和刷新令牌。

我的问题是，如果我的 NextJS 应用程序部署到 vercel 域：www.my-nextjs-app.vercel.com，是否正在向部署到 aws www.my-backend-app.aws.com 的后端应用程序发出请求，然后我的后端 cookie由于 CORS，set 不会被应用（因为他们考虑了来自不同域的第三方 cookie）。

（如果我在 localhost:3000 本地服务器我的 create-react-app 并向我在 localhost:5000 的本地服务器发出请求也是如此，chrome 不会显示 httpOnly cookie，因为它来自不同的域）

这与我的 create-react-app 不同，后者直接从同一域的后端提供服务，因此没有第三方 cookie 的问题。

有解决办法吗？

编辑：此外，Next.JS 真的要与现有服务器一起使用吗？或仅无服务器

Answer 1

为 ui 和后端使用多个服务器是很常见的。有几种方法可以解决您的问题：

1.Deploy 一切都在一个域上并设置反向代理（图片来自here）

当然，这些 orging 服务器可以是计算机运行不同端口上的不同应用程序。您可以使用 nginx 作为反向代理，配置如下所示：

server {
    listen      80;
    server_name yourapp.com;

    location / {
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_pass http://uiapp.com:3000;
    }

    location /backend/ {
       rewrite ^/backend(/.*)$  break;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_pass http://backendapp.com:8000;
    }
}

如果您想代理来自 http://yourapp.com/backend/foobar to http://backendapp.com:8000/foobar

的请求，rewrite 指令是红色的 ui

有关如何设置 nginx 的更多详细信息here。但是互联网上还有很多其他 guied。

您还可以为现有 node.js 应用程序使用中间件来代理传递给您的 NextJs 应用程序。

2.Deploy 您在子域上的后端服务器。如果您为 http-only cookie 指定 Domain，它们也会被发送到子域。例如。如果使用 yourapp.com 作为域，cookie 将在 backend.yourapp.com 和 yourapp.com

上可用

Set-Cookie: name=value; domain=yourapp.com

3.Use 授权 header 而不是 cookie。在这种情况下，您需要将令牌发送到 UI 应用程序，它会将它们存储在 cookie、sesionStorage 或 localStorage 中，您 UI 应用程序将使用您的令牌添加授权 header对于您的后端：

var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
return xhr;

当然，在这种情况下，您的后端需要能够在授权中接受令牌 header。

如何将 NextJS 应用程序与现有 Node.js 后端一起使用？

How to use a NextJS app with an existing Node.js backend?

javascript

cookies

cross-domain

node.js

next.js