Flask蓝图拆分后CORS问题及Nginx反向代理故障排查

首先得明确：你的CORS配置其实没毛病（不然/test路由也不会正常工作），真正的问题出在React用AJAX请求/login接口后，Flask返回重定向到Google服务器，但Google不会给你的localhost:3000返回跨域允许头，这才导致了CORS报错。

为什么会出现这个问题？ #

当你在React里用await users.get('/login')发起AJAX请求时，浏览器会先请求你的Flask服务，Flask返回302重定向到Google的认证地址。此时浏览器会自动发起第二个请求到Google，但Google的服务器不会设置Access-Control-Allow-Origin: localhost:3000，所以AJAX的跨域检查直接失败——这和你的Flask CORS配置完全无关，因为第二个请求的目标是Google，不是你的后端。

最直接的解决方案：放弃AJAX，用浏览器顶级导航 #

OAuth2的授权流程从设计上就应该是浏览器页面跳转，而不是AJAX请求。你只需要修改React的认证逻辑，直接让浏览器跳转到/login路由即可：

authenticate = () => {
    console.log('authenticate called')
    window.location.href = '/login'; // 直接触发页面跳转，绕过AJAX跨域检查
}

这样做的好处是：

• 完全避开CORS问题，因为这是浏览器的顶级导航，不是跨域AJAX请求
• 符合OAuth2的标准流程，Google重定向回来后也能正常处理回调

如果你坚持用Nginx反向代理（优化跨域架构） #

你的Nginx配置存在几个问题，导致出现“网络连接丢失”的错误，调整后的配置如下：

修正后的Nginx.conf #

user www-data;
worker_processes 1;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    worker_connections 1024;
}

http {
    upstream react-client {
        server react-client:3000; # 指向React容器的内部端口
    }
    upstream flask-backend {
        server flask-backend:5000; # 指向Flask容器的内部端口
    }

    server {
        listen 80;
        server_name localhost;

        # 处理前端所有路由和静态资源
        location / {
            proxy_pass http://react-client;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            # 支持React的前端路由（刷新页面不404）
            try_files $uri $uri/ /index.html;
        }

        # 转发所有认证相关路由到Flask后端
        location ~ ^/login(/.*)?$ {
            proxy_pass http://flask-backend;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }

        location /logout {
            proxy_pass http://flask-backend;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
    }
}

调整Docker Compose配置 #

不需要把React的3000端口暴露到主机（因为Nginx直接从容器内部访问），修改后的docker-compose.yml片段：

react-client:
    image: react-client
    container_name: react-client
    build:
      context: ./client
    depends_on:
      - flask-backend
    # 去掉ports: -3000:3000，不需要暴露到主机
    restart: on-failure

后续调整 #

1. 把Google OAuth的redirect_uri改成http://localhost/login/callback（因为现在通过Nginx代理，外部访问地址是localhost:80）
2. 可以删除Flask代码里的所有CORS相关配置（因为前端和后端现在同域，都是localhost:80，不需要跨域允许）

这样调整后，整个流程会变成：

1. 访问http://localhost → Nginx转发到React客户端
2. 点击认证按钮 → 跳转到http://localhost/login → Nginx转发到Flask后端
3. Flask重定向到Google认证服务器 → 用户登录后回调到http://localhost/login/callback → Nginx转发回Flask处理
4. 处理完成后再重定向回前端页面

整个过程没有跨域问题，也符合OAuth的标准流程。

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