node.js - React与Node.js前后端分离项目部署问题？

Question

这是一个前后端分离的项目：前端是React，后端是Node.js

本地测试没有任何问题，上传到云服务器之后，测试后端没有任何问题。但是React却无法把数据发给后端

网上查询用Nginx部署前端，我的nginx核心配置文件如下

    server {                listen 80;        server_name www.xiaoyangst.top;        root /home/xyst/XrtcDemo/myapp/build;        index index.html;        location / {            try_files $uri %uri/ /index.html;        }                location /api{            proxy_pass http://www.xiaoyangst.top:8888;        }        }    

外网访问http://www.xiaoyangst.top能够看到前端，说明nginx配置没有问题，但是代理配置应该存在问题，即跨域问题
本地测试环境跨域问题没有，因为可以添加文件setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) {    app.use(        '/api',        createProxyMiddleware({            target: 'http://www.xiaoyangst.top:8888',            changeOrigin: true,            pathRewrite: {'^/api': ''}        })    );};

本地前端能够正常与云服务器后端通信，但是云服务器上部署的前端却不行，希望各位能给个解决方案

Answer 1

做一个rewrite即可

location ^~ /api {    rewrite ^/api/(.*)$  /$1 break;    proxy_pass http://www.xiaoyangst.top:8888;    proxy_set_header Host $http_host;}

Answer 2

location /api{    proxy_pass http://www.xiaoyangst.top:8888;}

这样写最后拼接成的url是带/api后缀的，比如你请求的是xxx/api/request1，那么转到后端的请求路径就是 http://www.xiaoyangst.top:8888/api/request1

location /api{    proxy_pass http://www.xiaoyangst.top:8888/;}

这样写的话最后拼接成的url是不带/api后缀的，比如你请求的是xxx/api/request1，那么转到后端的请求路径就是 http://www.xiaoyangst.top:8888/request1

Answer 3

最后增加一个/看看

location /api{    proxy_pass http://www.xiaoyangst.top:8888/;}

Answer 4

你的问题看起来主要是由于React应用部署在云服务器上后，无法正确地与Node.js后端进行通信。这可能是由于跨域资源共享（CORS）问题，也可能是由于Nginx配置问题导致的。

首先，你需要确保你的Node.js后端已经正确设置了CORS策略，允许来自你的前端应用（即React应用）的跨域请求。你可以使用cors这个npm包来实现这一点。以下是一个简单的示例：

const express = require('express');const cors = require('cors');const app = express();app.use(cors());// your routes...app.listen(8888, () => {  console.log('Server is running on port 8888');});

在这个示例中，cors()中间件允许所有的跨域请求。在实际的生产环境中，你可能需要更精细地控制哪些源可以进行跨域请求，以避免安全风险。

其次，你的Nginx配置看起来已经正确地设置了代理，将/api路径的请求转发到你的Node.js后端。但是，请注意，你的Node.js后端应该监听在云服务器的某个端口上，而不仅仅是www.xiaoyangst.top:8888。你需要确保你的Node.js后端实际上是在这个地址和端口上运行的。

另外，你提到你在本地环境中使用了setupProxy.js文件来处理跨域问题。然而，这个解决方案只适用于开发环境，它使用了http-proxy-middleware来代理请求。在生产环境中，你应该在服务器端（即Node.js后端）处理CORS问题，而不是在前端。

如果你已经正确设置了CORS策略，并且你的Node.js后端也在正确的地址和端口上运行，但你仍然遇到问题，那么问题可能在于Nginx的配置。你可以尝试在你的Nginx配置中添加proxy_set_header来传递原始请求头，如下所示：

location /api {    proxy_pass http://www.xiaoyangst.top:8888;    proxy_set_header Host $host;    proxy_set_header X-Real-IP $remote_addr;    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;    proxy_set_header X-Forwarded-Proto $scheme;}

这些proxy_set_header指令将确保你的Node.js后端能够接收到正确的请求头，包括原始的主机名、IP地址、转发路径和协议。这可能会解决你的问题。

如果以上方法都无法解决你的问题，那么你可能需要进一步检查你的React应用和Node.js后端的代码，确保它们能够正确地处理HTTP请求和响应。