Debian环境下Nginx+Gunicorn部署React+Flask API的SSL通信问题

我在Debian系统上用Nginx+Gunicorn（由supervisor维护）部署了Flask+React应用，遇到以下问题：

• 最初Nginx仅开放80端口时，Chrome出现CORS错误（Safari正常，为已知Chrome问题），其余功能正常
• 配置SSL后出现两个核心问题：
  1. 浏览器访问网站时，开发者控制台显示https://localhost:5000/连接被拒绝
  2. 使用CURL测试API完全正常
• 额外问题：Swagger UI无法通过浏览器访问

补充信息：

• React和Flask部署在同一服务器，已开放5000、443、80端口
• 所有服务在domain.com/根路径提供，Flask API路径为domain.com/api/v1/{calls}
• 开发环境使用Flask内置服务器+NPM Start运行一切正常

server {
    root /var/www/project-app/frontend/build;
    index index.html;
    server_name _;

    location / {
         # proxy_pass http://localhost:5000;
         # proxy_redirect off;
         # proxy_set_header Host $host;
         # proxy_set_header X-Real-IP $remote_addr;
         # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        try_files $uri $uri/ =404;
        add_header Cache-Control "no-cache";
    }

    location /static {
        alias /var/www/project-app/frontend/build/static;
        expires 1y;
        add_header Cache-Control "public";
    }

    location /api {
        include proxy_params;
        proxy_pass http://localhost:5000;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    listen 443 ssl; # managed by Certbot
    listen [::]:443 ssl;

    ssl_certificate /etc/letsencrypt/live/project/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/project/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


    access_log /var/log/project_access.log;
    error_log /var/log/project_access.log;

    proxy_headers_hash_max_size 512;
    proxy_headers_hash_bucket_size 128;

}
server {
    if ($host = app.project.tld) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80;
    # server_name app.project.tld;
    server_name _;
    return 404; # managed by Certbot


}

• Debian 11
• APT安装最新版Nginx
• 所有PIP/NPM包已更新
• Python 3.9.2

1. 修复React前端API请求地址问题 #

浏览器报错https://localhost:5000/连接被拒绝，核心原因是React前端的API请求硬编码了localhost:5000地址，生产环境下应该请求当前域名的/api路径（Nginx已配置将/api代理到Flask的5000端口）。

• 检查React项目的生产环境配置文件（如.env.production），将API基础URL设置为/api，而非http://localhost:5000/api或https://localhost:5000/api
• 重新构建React项目，替换服务器上/var/www/project-app/frontend/build目录的内容

2. 修复Swagger UI访问问题 #

Swagger UI无法访问是因为其路由（如/swagger或/docs）不属于静态文件，被Nginx的try_files规则拦截返回404。需在Nginx的server块中添加对应路由的代理规则：

location /swagger {
    include proxy_params;
    proxy_pass http://localhost:5000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

如果你的Swagger路径是/docs或其他，替换成对应路径即可。

3. 优化Nginx配置细节 #

• 将server_name _;改为你的真实子域名（如app.project.tld），避免Nginx默认匹配导致的异常
• 修改80端口的server块，确保所有HTTP请求重定向到HTTPS，而非返回404：

server {
    listen 80;
    listen [::]:80;
    server_name app.project.tld;
    return 301 https://$host$request_uri;
}

4. 验证配置并重启服务 #

• 测试Nginx配置合法性：sudo nginx -t
• 重启Nginx：sudo systemctl restart nginx
• 确认Gunicorn和supervisor服务正常运行：sudo supervisorctl status

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