在Linux服务器通过Nginx部署Flask+React应用时遭遇CORS错误求助

问题根源 #

你的前端直接请求http://localhost:5000/auth/login，但当前页面域名是https://<mydomain>，属于跨域请求；同时Nginx已配置/api路径代理到Flask后端，却未通过代理路径发起请求，导致同源策略拦截。

解决方案 #

1. 修正前端请求地址 #

将所有后端接口请求的前缀从http://localhost:5000改为/api。例如：

// 错误写法
fetch('http://localhost:5000/auth/login', options)

// 修正后
fetch('/api/auth/login', options)

这样Nginx会自动把/api开头的请求转发到Flask后端，避免跨域。

2. 配置Flask后端CORS支持 #

安装flask-cors依赖：

pip install flask-cors

在Flask应用的__init__.py中启用CORS：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 生产环境可指定具体域名，比如 origins="https://<mydomain>"
CORS(app)

# 也可针对/api路由单独配置
# CORS(app, resources={r"/api/*": {"origins": "*"}})

3. 补全Nginx配置 #

你的第二个server块不完整，补充监听80端口并统一跳转HTTPS：

server {
    if ($host = <mydomain>) {
        return 301 https://$host$request_uri;
    }

    listen 80;
    server_name <mydomain> www.<mydomain>;
    return 404;
}

验证操作 #

1. 重启Nginx：sudo systemctl restart nginx
2. 重启Flask后端服务
3. 重新构建React前端并部署到client/dist目录
4. 测试注册/登录功能，确认跨域错误消失

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