部署在EC2的React应用中Axios POST请求被附加远程URL前缀导致失败，如何解决？

首先得点出一个关键误区：你的React应用是运行在用户浏览器中的，不是部署在EC2实例内部，所以用户的浏览器根本无法直接访问EC2的私有内网IP（10.11.1.147）——这也是为什么你用EC2内部的curl能正常调用，但前端请求会出问题的核心原因。你看到的"POST请求URL被自动附加远程URL前缀"，大概率是因为浏览器把当前访问React应用的公网域名/IP作为基础URL，和你配置的私有IP拼接出了错误的路径（比如https://your-public-ec2-ip/http://10.11.1.147/login）。

下面是具体的排查和修复步骤：

1. 先确认环境变量是否真的生效 #

React的REACT_APP_*环境变量是在构建时注入的，不是运行时。如果你的React应用是在本地构建好再传到EC2的，那本地构建时的环境变量会被打包进去，EC2上的环境变量不会生效。

• 调试方法：在React组件里加一行console.log(process.env.REACT_APP_SERVER_URL)，打开浏览器开发者工具的控制台，看看实际输出的是什么。如果不是http://10.11.1.147，说明构建时环境变量没配置对。
• 修复：在EC2上构建React应用时，先设置环境变量再执行构建命令：

  REACT_APP_SERVER_URL=http://10.11.1.147 npm run build
  

  或者用PM2等进程管理工具时，在配置文件里明确指定环境变量。

2. 解决浏览器无法访问EC2私有IP的核心问题 #

上面的步骤只是确保环境变量正确，但即使变量正确，用户浏览器依然无法访问EC2内网IP。正确的做法是用反向代理，让Nginx（或你用的静态资源服务器）把前端的API请求转发到Node服务器的私有IP。

步骤一：配置Nginx反向代理 #

假设你用Nginx托管React静态文件，修改Nginx配置（通常在/etc/nginx/sites-available/default）：

server {
    listen 80;
    server_name your-public-domain.com; # 替换成你的EC2公网IP或域名

    # 托管React静态文件
    root /path/to/your/react/build/folder;
    index index.html;

    # 处理React路由刷新404的问题
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 反向代理所有API请求到Node服务器的私有IP
    location /api {
        proxy_pass http://10.11.1.147:3000; # 替换成你的Node服务端口
        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;
    }
}

配置完成后重启Nginx：

sudo systemctl restart nginx

步骤二：修改React的API请求配置 #

• 更新环境变量REACT_APP_SERVER_URL为/api（相对路径）
• 修改你的postLogin函数（或者配置Axios全局baseURL）：

  // 推荐：全局配置Axios的baseURL，避免重复拼接
  // 在src/utils/axios.js里：
  import axios from 'axios';
  axios.defaults.baseURL = process.env.REACT_APP_SERVER_URL;
  export default axios;
  
  // 然后postLogin函数可以简化：
  export const postLogin = async ({ email, password }) => {
    let response;
    const cookies = new Cookies();
    try {
      response = await axios.post('/login', { email, password });
      cookies.set("JWT", response.data.jwt, { path: "/" });
      cookies.set("UserId", response.data.userId, { path: "/" });
    } catch (err) {
      return err.response;
    }
  };
  

这样配置后，前端请求/api/login时，Nginx会自动把请求转发到Node服务器的私有IP，既解决了浏览器无法访问内网IP的问题，也避免了URL前缀错误。

3. 排查其他可能的原因 #

如果上面的步骤都试过还是有问题，可以检查：

• 有没有全局设置过axios.defaults.baseURL为window.location.origin之类的公网地址，覆盖了你的配置
• React-Query的QueryClient有没有设置默认的请求前缀（一般不会，但可以检查defaultOptions里的配置）
• 浏览器开发者工具的Network标签，查看失败请求的完整URL，确认到底是哪里拼接错误

内容的提问来源于stack exchange，提问作者Ed Whittle