NGINX Docker部署的React应用调用API自动跳转127.0.0.1问题求助

Postman可正常调用代理接口，说明NGINX反向代理基础链路通顺，可按照以下步骤定位修复：

第一步：定位问题归属 #

• 在浏览器控制台中对API请求代码打断点，打印请求发起前的完整URL：
  • 如果此时URL已经是http://127.0.0.1:8000/xxx，说明问题出在React侧配置，和NGINX无关
  • 如果URL确为http://192.168.100.6:8080/api/xxx，说明问题出在NGINX或后端服务配置

第二步：React侧问题修复 #

如果确认是前端请求地址错误，排查以下两点：

• 生产打包环境变量配置：如果使用Create React App框架，所有前端可用的环境变量必须以REACT_APP_开头，打包前需确认REACT_APP_API_URL的值为http://192.168.100.6:8080/api，而非本地开发时用的http://127.0.0.1:8000
• 请求库全局配置：检查axios、fetch等请求库的全局baseURL配置，确认没有硬编码的127.0.0.1:8000地址覆盖业务配置

第三步：NGINX配置修复 #

如果确认请求发起地址正确，修改NGINX配置中以下错误项：

upstream api {
    server backend:8000;
}

server {
    listen 8080;
    server_name 192.168.100.6;

    add_header Access-Control-Allow-Origin *;
    # 删掉末尾多余的逗号，避免CORS规则解析异常
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT";
    add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range";
    add_header Access-Control-Expose-Headers "Content-Length,Content-Range";
    
    location /api/{  
        # 删掉 resolver 配置：Docker内部服务名默认用127.0.0.11解析，127.0.0.1无DNS解析能力会导致upstream解析异常
        proxy_set_header Host $host;
        # 如果后端接口没有/api前缀，末尾加斜杠会自动去掉请求路径中的/api段
        proxy_pass http://api/;
    }

    # ignore cache frontend
    location ~* (service-worker\.js)$ {
        add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';    
        expires off;    
        proxy_no_cache 1;
    }

    location / {
        root /var/www/react-frontend;
        try_files $uri $uri/ /index.html;
    }
}

第四步：后端服务配置排查 #

如果修改NGINX后问题仍存在，排查后端服务：

• 检查接口的3xx重定向响应，确认Location响应头没有硬编码127.0.0.1:8000，改为动态读取请求的Host头生成地址
• 检查接口返回的业务数据中，是否包含硬编码的127.0.0.1:8000接口地址

内容的提问来源于stack exchange，提问作者a-maccormack