[英]How to use a NextJS app with an existing Node.js backend?
Currently I have an existing Node.js backend that works with my create-react-app project.目前,我有一个现有的 Node.js 后端,可与我的 create-react-app 项目一起使用。
I'm migrating to NextJS but have some questions.我正在迁移到 NextJS 但有一些问题。
I have a simple JWT authentication process:我有一个简单的 JWT 认证过程:
my-server/api/auth
my-server/api/auth
发出请求httpOnly
cookie to response header. and returns access token as response body.httpOnly
cookie 添加到响应 header。并返回访问令牌作为响应主体。 My quesetion is if my NextJS app which is deployed to vercel with domain: www.my-nextjs-app.vercel.com
, is making requests to my backend app which is deployed to aws at www.my-backend-app.aws.com
, then the cookies my backend set won't be applied because of CORS (since they considered third party cookies from different domain).我的问题是,如果我的 NextJS 应用程序部署到域为 vercel 的域:
www.my-nextjs-app.vercel.com
,是否正在向部署到 aws 的后端应用程序发出请求,该应用程序部署到位于www.my-backend-app.aws.com
,然后 cookies 我的后端集将不会应用,因为 CORS (因为他们考虑来自不同域的第三方 cookies )。
(That's also true if I locally server my create-react-app at localhost:3000
and make requests to my local server at localhost:5000
, chrome won't show the httpOnly
cookie because it's from a different domain) (如果我在
localhost:3000
本地服务器我的 create-react-app 并在localhost:5000
向我的本地服务器发出请求,那也是如此,chrome 不会显示httpOnly
cookie,因为它来自不同的域)
This is different from my create-react-app which was served directly from my backend at the same domain and thus had no problem of third party cookies.这与我的 create-react-app 不同,后者直接从同一域的后端提供服务,因此没有第三方 cookies 的问题。
Is there a solution for that?有解决办法吗?
Edit: Also, is Next.JS really meant to be used with an existing server?编辑:此外,Next.JS 真的要与现有服务器一起使用吗? or serverless only
或仅无服务器
Using multiple servers for ui and backend is pretty common.为 ui 和后端使用多个服务器是很常见的。 There are several ways to solve your issue:
有几种方法可以解决您的问题:
1.Deploy everything on one domain and set up reverse proxy (the image is taken from here ) 1.将所有东西部署在一个域上并设置反向代理(图片取自这里)
Ofcourse those orging servers can be different apps on the machine running on different ports.当然,这些 orging 服务器可以是在不同端口上运行的机器上的不同应用程序。 You could use nginx as a reverse proxy the config would look like this:
您可以使用 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;
}
}
The rewrite
directive is required if you'd like to proxy requests from http://yourapp.com/backend/foobar to http://backendapp.com:8000/foobar如果您想代理从http://yourapp.com/backend/foobar到http://backendapp.com:8000/foobar的请求,则需要
rewrite
指令
More details on how to set up nginx is here .有关如何设置 nginx 的更多详细信息,请参见此处。 But there are lots of other guied on the inte.net.
但是在 inte.net 上还有很多其他的指导。
You can also use middleware for your existing node.js app to proxypass to your NextJs app.您还可以为现有的 node.js 应用程序使用中间件来代理传递到您的 NextJs 应用程序。
2.Deploy your backend server on subdomain. 2.在子域上部署您的后端服务器。 If you specify Domain for http-only cookies they will be send to subdomains as well.
如果您为 http-only cookies 指定域,它们也将被发送到子域。 Eg if use yourapp.com as a domain the cookie will be available on
backend.yourapp.com
and yourapp.com
例如,如果使用 yourapp.com 作为域,cookie 将在
backend.yourapp.com
和yourapp.com
上可用
Set-Cookie: name=value; domain=yourapp.com
3.Use Authorizatin header instead of cookies. In this case you'll need to send tokens to the UI app and it'll store them either in cookies, sesionStorage or localStorage and you UI app will add Authorization header with your token for your backend: 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;
Ofcourse in this case your backend needs to be able to accept token in Authorization header.当然,在这种情况下,您的后端需要能够在授权 header 中接受令牌。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.