PERN Stack部署AWS EC2 Nginx后Axios请求URL异常求助

问题概述 #

本地运行正常的PERN Stack应用部署到AWS EC2后，主域名下的Axios请求正常，但进入子页面（如商品页）时，请求URL格式错误。例如商品页的请求URL变为 http://app3.dev100.xyz/products/api/products/3/related，正确格式应为 http://app3.dev100.xyz/api/products/3/related。客户端采用react-router history模式，问题疑似出在Axios基础URL配置或Nginx配置上。

相关配置 #

1. React Axios环境配置 #

// 开发环境（localhost运行正常）
axios.defaults.baseURL = 'http://localhost:5000/api';

// 生产环境（仅主域名正常，子页面出错）
axios.defaults.baseURL = 'api';

// 原条件判断配置
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? "api/" : 'http://localhost:5000/api';

2. Nginx配置（客户端与API部署在同一服务器） #

server {
    listen 80;
    listen [::]:80;

    root /home/ubuntu/apps/ecom-app/client/build;

    index index.html index.htm;

    server_name app3.dev100.xyz;

    location / {
            try_files $uri /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

问题原因 #

核心问题是Axios相对路径的解析逻辑：当baseURL设置为api或api/这种不带开头斜杠的相对路径时，浏览器会基于当前页面的路由路径（如/products）来拼接URL，导致最终请求路径变成/products/api/xxx，而非预期的根路径下的/api/xxx。

解决方法 #

方案一：修改Axios baseURL为根相对路径 #

将生产环境的baseURL改为/api（开头添加斜杠），确保所有请求都从域名根路径开始拼接：

axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? "/api" : 'http://localhost:5000/api';

方案二：使用完整绝对URL（可选） #

如果需要更明确的路径指向，也可以直接配置生产环境的完整绝对URL：

axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? "http://app3.dev100.xyz/api" : 'http://localhost:5000/api';

验证Nginx配置 #

当前Nginx的location /api/配置是正确的，会自动将所有以/api/开头的请求代理到本地的API服务（localhost:5000），无需额外修改。

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