React+Flask+Nginx部署后CORS头Access-Control-Allow-Origin缺失求助

核心问题定位 #

你遇到的问题有两个关键根源：

1. 前端请求地址错误：前端代码中硬编码了127.0.0.1:8000作为API地址，部署到VPS后，用户浏览器执行代码时会向自身本地的8000端口发起请求，而非VPS上的后端服务，这是导致CORS错误的主要诱因。
2. CORS配置冲突/不完整：同时使用Flask-CORS和Nginx配置CORS，可能导致header冲突；且Nginx的add_header默认仅在特定状态码下生效，未处理OPTIONS预检请求。

方案一：通过Nginx反向代理消除跨域（推荐） #

这种方式从根源上避免跨域问题，前端使用相对路径请求API，由Nginx转发到后端：

修改前端Nginx配置 #

server {
    listen 3000;
    server_name _;
    root /path/to/react/app/build;
    index index.html;

    # 代理API请求到后端Unix Socket
    location /api {
        proxy_pass http://unix:/path/to/unix/socket/file.sock;
        proxy_set_header Host $host;
        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;
    }

    # React单页应用路由兼容，避免刷新404
    location / {
        try_files $uri $uri/ /index.html;
    }
}

前端代码调整 #

将API请求路径改为相对路径，比如原请求http://127.0.0.1:8000/users改为/api/users。

方案二：修复CORS配置（保留跨域请求场景） #

若必须让前端直接请求VPS公网IP的8000端口，需按以下步骤调整：

1. 修正前端请求地址 #

将前端代码中的API地址从127.0.0.1:8000改为http://你的公网IP:8000，确保请求发送到VPS后端。

2. 统一CORS配置（二选一） #

仅使用Flask-CORS配置

删除后端Nginx中所有add_header相关的CORS代码，确保Flask-CORS配置正确（替换your-public-ip为实际公网IP）：

CORS(
    app,
    resources={r"/*": {
        "origins": [
            "http://localhost:3000",
            "http://127.0.0.1:3000",
            "http://your-public-ip:3000"
        ]
    }},
    supports_credentials=True
)

重启Flask应用和Nginx。

仅使用Nginx配置

删除Flask代码中的Flask-CORS配置，修改后端Nginx配置以处理OPTIONS请求并确保header全局生效：

server {
    listen 8000;
    server_name _;

    proxy_set_header Host $host;
    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;

    # 处理OPTIONS预检请求
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' 'http://your-public-ip:3000';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Content-Length' '0';
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }

    location / {
        include /etc/nginx/proxy_params;
        proxy_pass http://unix:/path/to/unix/socket/file.sock;

        # 用always确保所有状态码都添加header
        add_header 'Access-Control-Allow-Origin' 'http://your-public-ip:3000' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
    }
}

替换your-public-ip为实际公网IP后，重启Nginx。

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