React项目本地API请求正常 部署服务器后无法获取数据排查

本地开发环境接口请求正常、生产build包部署后请求失败，结合给出的Nginx配置，按优先级从高到低排查以下问题：

• 混合内容拦截：如果你的主站example.com部署时开启了HTTPS，前端页面里写死的HTTP协议接口地址http://api.example.com/*.json会被浏览器默认拦截。本地开发环境一般跑在HTTP的localhost地址，不受混合内容安全策略限制，所以请求正常。
• 跨域配置缺失：现有Nginx配置只加了最基础的跨域源允许头，没有处理浏览器跨域请求先发的OPTIONS预检请求；同时add_header指令写在location块内，部分响应场景下会出现头不生效的问题。如果本地开发时依赖React脚手架自带的devServer proxy转发请求，打包后proxy规则不会生效，浏览器直接发跨域请求就会失败。
• 文件权限/路径错误：Nginx运行用户（Debian/Ubuntu系默认是www-data，CentOS系默认是nginx）如果对静态JSON文件存放目录没有读权限，或者文件实际上没传到对应目录、文件名拼写错误，会返回403/404导致请求失败。

1. 优先解决混合内容拦截
   打开浏览器F12开发者工具的Console面板，如果看到Mixed Content相关报错，直接给api.example.com配置SSL证书开启HTTPS，同时把前端代码里的接口地址替换为HTTPS协议即可，不建议用其他绕过安全策略的方案。

2. 修正Nginx配置
   将api.example.com对应的Nginx配置替换为以下内容，补全预检请求处理、把跨域头提升到server块保证全场景生效：

server {
    listen 80;
    # 开启HTTPS后补充443端口的SSL相关配置即可
    root /var/www/html/example_static_api;
    index index.html index.htm;
    server_name api.example.com;

    # 跨域头统一配置在server块，所有请求自动继承
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, OPTIONS';
    add_header Access-Control-Allow-Headers '*';

    # 直接响应OPTIONS预检请求，不需要走静态文件查找逻辑
    if ($request_method = 'OPTIONS') {
        return 204;
    }

    location / {
        try_files $uri $uri/ =404;
    }
}

配置修改完成后依次执行以下命令校验并重载配置：

# 校验配置语法是否正确
nginx -t
# 语法校验通过后重载配置生效
nginx -s reload

3. 修复文件权限与路径校验
   执行以下命令给Nginx运行用户授予静态文件目录的读权限，避免403错误：

# Debian/Ubuntu系统执行
chown -R www-data:www-data /var/www/html/example_static_api
# CentOS系统执行
# chown -R nginx:nginx /var/www/html/example_static_api

chmod -R 755 /var/www/html/example_static_api

权限配置完成后，直接在浏览器访问http://api.example.com/ourservice.json和http://api.example.com/ideas.json，确认可以正常返回JSON内容，如果还是返回404，先检查两个JSON文件是否真的上传到了/var/www/html/example_static_api目录下，文件名大小写、后缀名是否和请求地址完全匹配。

4. 前端配置校验
   如果本地开发时在package.json中配置了proxy代理规则，注意打包后该规则不会生效，需要确认前端代码里写的接口地址是完整可访问的绝对地址，不要写相对路径导致请求被发到主站example.com域名下找不到对应资源。

内容的提问来源于stack exchange，提问作者Mohammad Fathi Rahman