AWS EC2上MERN栈接口JS请求失败问题求助

问题背景 #

在AWS EC2实例部署MERN栈应用，Nginx配置如下：

server {
    #listen       80;
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name  yourdomain.com;

    access_log /home/ubuntu/client/server_logs/host.access.log main;
    client_max_body_size 10M;
    location /api/ {
        add_header X-debug-message innnnnnnnnnnnnn;
    proxy_pass http://localhost:3000/;
    }

    location /admin-dashboard {
        root /home/ubuntu;
        index index.html;
        add_header X-uri "$uri";
        add_header X-Frame-Options SAMEORIGIN;
        add_header X-Content-Type-Options nosniff;
        add_header X-XSS-Protection "1; mode=block";
        add_header Strict-Transport-Security "max-age=31536000; includeSubdomains;";
    } 

    location / {
        root /home/ubuntu/client/deploy;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
        add_header X-uri "$uri";
        add_header X-Frame-Options SAMEORIGIN;
        add_header X-Content-Type-Options nosniff;
        add_header X-XSS-Protection "1; mode=block";
        add_header Strict-Transport-Security "max-age=31536000; includeSubdomains;";
    }
  
    location = /49x.html {
        root   /usr/share/nginx/html;
    }

    server_tokens off;

    location ~ /\.ht {
        deny  all;
    }

}

已配置安全组，通过浏览器直接访问http://clikjo.com/api/或Postman请求均正常，但前端使用fetch/Axios发起请求时，报错[TypeError: Network request failed]，尝试过修改安全组、添加请求头、调整fetch选项，问题仍未解决。

排查与解决方案 #

1. 修复CORS配置 #

Postman和浏览器直接访问不会触发严格的CORS校验，但前端脚本跨域请求会受限制，需从后端和Nginx两层配置：

• 后端Node.js服务：安装并启用cors中间件，指定允许的来源：

  const cors = require('cors');
  app.use(cors({
    origin: 'http://clikjo.com',
    credentials: true // 若涉及Cookie、Token等凭证需开启
  }));
  

• Nginx补充配置：在/api/块中强制添加CORS头，确保所有响应（包括非成功状态码）都携带：

  location /api/ {
      add_header Access-Control-Allow-Origin http://clikjo.com always;
      add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
      add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
      add_header X-debug-message innnnnnnnnnnnnn;
      proxy_pass http://localhost:3000/;
      # 处理OPTIONS预检请求
      if ($request_method = OPTIONS) {
          return 204;
      }
  }
  

  注意always关键字，避免仅成功响应才添加头。

2. 检查proxy_pass路径匹配 #

当前location /api/的proxy_pass http://localhost:3000/会把/api/xxx转发为http://localhost:3000/xxx，如果后端接口实际路径是/api/xxx，会导致路径不匹配。可调整为：

location /api/ {
    proxy_pass http://localhost:3000/api/;
    # 其他配置...
}

或在后端配置中去掉/api前缀，匹配转发后的路径。

3. 校验前端请求URL #

• 确认前端使用相对路径/api/xxx发起请求，而非硬编码本地开发地址（如http://localhost:3000/api/xxx）。
• 若用绝对路径，确保域名拼写正确，无HTTPS/HTTP协议混淆。

4. 排查Strict-Transport-Security影响 #

当前Nginx配置的Strict-Transport-Security头会强制浏览器使用HTTPS（若之前访问过HTTPS版本），但当前站点仅监听80端口，导致请求失败：

• 暂时注释该头测试：

  # add_header Strict-Transport-Security "max-age=31536000; includeSubdomains;";
  

• 生产环境建议配置HTTPS（申请SSL证书，监听443端口）。

5. 查看浏览器控制台详细错误 #

打开浏览器开发者工具（F12），在Network面板：

• 查看请求状态码（404/500/CORS错误等）。
• 检查响应头是否包含正确的CORS字段。
• 确认请求是否被重定向到异常地址。

6. 检查EC2实例本地防火墙 #

安全组配置正确的情况下，EC2实例的iptables可能限制本地访问3000端口，执行命令检查：

sudo iptables -L -n

确保允许本地访问3000端口，或临时关闭iptables测试（生产环境谨慎操作）。

内容的提问来源于stack exchange，提问作者fares halasah