React应用配置Nginx反向代理后/swagger与/redoc页面空白无法正常显示

看起来你遇到的问题我之前也碰到过！核心原因是Swagger/Redoc页面加载的静态资源（CSS、JS文件）没有正确转发到Django后端，反而被React的前端路由接管了，返回的是React的index.html页面——这就是为什么控制台会报Uncaught SyntaxError: Unexpected token '<'（浏览器把HTML的开头<当成JS代码解析，自然报错），页面也显示空白+提示需要启用JS。

第一步：修正Nginx配置，转发静态资源请求到Django #

在Nginx的443端口server块里，新增一个处理Django静态资源的location，把所有/static/开头的请求都转发到Django的8000端口，而不是React的3000端口。具体配置如下：

server {
    # 保留你现有的所有配置...
    
    # 新增：转发Django静态资源请求
    location /static/ {
        proxy_pass http://mysite:8000/static/;
        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;
        proxy_set_header        Host $http_host;
        proxy_intercept_errors  on;
    }
    
    # 保留你原有的location /、/ht/、/swagger/配置...
}

第二步：确保Django已收集静态资源 #

生产环境下Django不会自动提供静态资源，需要先执行收集命令，把所有app的静态资源统一放到STATIC_ROOT目录下：

python manage.py collectstatic

执行前要确保你的settings.py里已经正确配置了静态资源路径，示例如下：

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

第三步：重启Nginx并测试 #

修改配置后，重启Nginx使配置生效：

sudo nginx -s reload

然后用Ctrl+Shift+R强制刷新浏览器（清空缓存），再访问/swagger/或者/redoc/，应该就能正常加载页面了。

补充说明 #

为什么你的/ht/路径能正常工作？因为它是纯接口请求，没有加载额外的静态资源，所以直接被Nginx转发到Django就处理好了。而Swagger/Redoc需要加载CSS、JS等静态资源，这些资源的路径默认是/static/swagger-ui/或/static/redoc/，之前这些请求都被Nginx转发到了React，导致返回错误的内容。

备注：内容来源于stack exchange，提问作者sushmee