React前端经Nginx无法向Node后端发送POST请求问题排查

• 部署环境：同一Linux服务器，Express后端REST API通过pm2运行在本地1210端口；React前端构建文件通过Nginx在80端口托管，构建文件路径为/var/www/agpcms/html/
• Nginx配置文件路径：/etc/nginx/sites-available/agpcms、/etc/nginx/sites-enabled/agpcms，配置内容如下：

# in /etc/nginx/sites-available/agpcms
server {
  listen 80;
  
  server_name localhost;
  root /var/www/agpcms/html;
  index index.html;
  
  access_log /var/log/nginx/agpcms.com.access.log;
  error_log /var/log/nginx/agpcms.com.error.log;

  location / {
    try_files $uri /index.html =404;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header Host $host;
    proxy_redirect off; 
  }
}

• 当前问题：GET请求正常，但POST类请求（如注册）无法获取响应
  • Brave浏览器：xhr和preflight请求均显示(failed)状态
  • Firefox浏览器：OPTIONS与POST请求返回空响应，控制台提示：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:1210/apis/v1/auth/signup. 
(Reason: CORS request did not succeed). Status code: (null).

• 已确认：后端CORS配置正确（直接访问1210端口时GET请求正常）

提问：需补充哪些配置才能处理POST请求？是否需要启用HTTPS来解决该问题？

1. 修正Nginx配置，添加API反向代理 #

当前Nginx仅处理前端静态资源路由，未将API请求转发至后端1210端口。前端直接请求localhost:1210会触发跨域（80端口与1210端口属于不同端口，同源策略限制）。

修改/etc/nginx/sites-available/agpcms配置文件，新增API路径的location块：

server {
  listen 80;
  
  server_name localhost;
  root /var/www/agpcms/html;
  index index.html;
  
  access_log /var/log/nginx/agpcms.com.access.log;
  error_log /var/log/nginx/agpcms.com.error.log;

  # 转发API请求到后端1210端口
  location /apis {
    proxy_pass http://localhost:1210;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_redirect off;
  }

  # 处理前端静态资源与路由
  location / {
    try_files $uri /index.html =404;
  }
}

• 说明：所有以/apis开头的请求会被转发至后端1210端口，前端只需调用/apis/v1/auth/signup即可，无需指定端口，从根源避免跨域问题。

2. 调整前端API请求地址 #

将前端代码中API请求的baseURL从http://localhost:1210改为/apis（或当前域名根路径下的apis前缀），确保请求发送至Nginx的80端口，再由Nginx转发到后端。

3. 验证后端CORS配置（可选） #

虽然你确认后端CORS配置正确，但通过Nginx转发后，后端收到的请求来源为localhost（Nginx地址），可确认后端CORS是否允许http://localhost（80端口）的请求，测试阶段可临时允许所有来源：

// Express后端CORS示例配置
const cors = require('cors');
app.use(cors({
  origin: 'http://localhost', // 生产环境需指定具体域名，测试可设为true允许所有来源
  credentials: true,
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
}));

4. 关于HTTPS #

当前问题核心是跨域请求，通过Nginx反向代理即可解决，无需强制启用HTTPS。但如果是生产环境服务，建议启用HTTPS保障数据传输安全，同时现代浏览器对HTTP站点的部分特性（如Cookie的SameSite属性）有更严格限制，启用HTTPS可避免后续潜在问题。

内容的提问来源于stack exchange，提问作者dEBA M