[英]How to use a NextJS app with an existing Node.js backend?
目前,我有一个现有的 Node.js 后端,可与我的 create-react-app 项目一起使用。
我正在迁移到 NextJS 但有一些问题。
我有一个简单的 JWT 认证过程:
my-server/api/auth
发出请求httpOnly
cookie 添加到响应 header。并返回访问令牌作为响应主体。 我的问题是,如果我的 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 真的要与现有服务器一起使用吗? 或仅无服务器
为 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 中接受令牌。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.