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

最后增加一个/看看

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

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

做一个rewrite即可

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