如何將 NextJS 應用程序與現有的 Node.js 后端一起使用？

Question

目前，我有一個現有的 Node.js 后端，可與我的 create-react-app 項目一起使用。
我正在遷移到 NextJS 但有一些問題。

我有一個簡單的 JWT 認證過程：

1. 前端向my-server/api/auth發出請求
2. 后端對用戶進行身份驗證，將刷新令牌作為httpOnly cookie 添加到響應 header。並返回訪問令牌作為響應主體。
3. 每次對服務器的下一次調用都將在 cookies 中包含訪問令牌和刷新令牌。

我的問題是，如果我的 NextJS 應用程序部署到域為 vercel 的域： www.my-nextjs-app.vercel.com ，是否正在向部署到 aws 的后端應用程序發出請求，該應用程序部署到位於www.my-backend-app.aws.com ，然后 cookies 我的后端集將不會應用，因為 CORS （因為他們考慮來自不同域的第三方 cookies ）。

（如果我在localhost:3000本地服務器我的 create-react-app 並在localhost:5000向我的本地服務器發出請求，那也是如此，chrome 不會顯示httpOnly cookie，因為它來自不同的域）

這與我的 create-react-app 不同，后者直接從同一域的后端提供服務，因此沒有第三方 cookies 的問題。

有解決辦法嗎？

編輯：此外，Next.JS 真的要與現有服務器一起使用嗎？ 或僅無服務器

Answer 1

為 ui 和后端使用多個服務器是很常見的。 有幾種方法可以解決您的問題：

1.將所有東西部署在一個域上並設置反向代理（圖片取自這里）

當然，這些 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(/.*)$ $1 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到http://backendapp.com:8000/foobar的請求，則需要rewrite指令

有關如何設置 nginx 的更多詳細信息，請參見此處。 但是在 inte.net 上還有很多其他的指導。

您還可以為現有的 node.js 應用程序使用中間件來代理傳遞到您的 NextJs 應用程序。

2.在子域上部署您的后端服務器。 如果您為 http-only cookies 指定域，它們也將被發送到子域。 例如，如果使用 yourapp.com 作為域，cookie 將在backend.yourapp.com和yourapp.com上可用

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

3.使用 Authorizatin header 而不是 cookies。在這種情況下，您需要將令牌發送到 UI 應用程序，它會將它們存儲在 cookies、sesionStorage 或 localStorage 中，您的 UI 應用程序將使用您的后端令牌添加授權 header :

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

當然，在這種情況下，您的后端需要能夠在授權 header 中接受令牌。