Flask API与Vue3 UI的CORS问题排查及解决方案咨询

核心原因 #

你的问题出在OAuth2授权流程的调用方式错误，而非Flask的CORS配置本身：

• 单独访问API时，是浏览器直接发起的页面请求，重定向到Google OAuth属于正常的浏览器跳转，不触发跨域AJAX的CORS限制。
• 前端用fetch调用API时，属于跨域AJAX请求，当API重定向到Google的授权端点时，浏览器会携带Origin: http://localhost:5173头，但Google的OAuth授权端点不支持跨域AJAX请求，即使返回了Access-Control-Allow-Origin头，也会因为重定向的跨域特性被浏览器拦截。

另外注意：localhost和127.0.0.1在浏览器中被视为不同的源，这也可能加剧头匹配的问题。

解决建议 #

1. 调整OAuth授权流程（推荐方案） #

OAuth2授权码流程应该由后端主导，前端仅负责触发页面跳转，而非用AJAX调用：

• 在前端添加一个按钮/链接，直接指向Flask API的授权端点（比如https://127.0.0.1:7070/auth/google）。
• 用户点击后，浏览器直接跳转到Flask的授权接口，再由Flask重定向到Google OAuth页面，完成授权后回调到Flask的指定端点，后端处理授权码交换令牌，最后返回结果给前端（或跳转到前端页面）。

这种方式完全避开跨域AJAX的CORS限制，同时保证授权码不会暴露给前端，符合安全规范。

2. 修正Flask CORS配置（仅辅助，无法解决核心流程问题） #

如果必须保留AJAX调用方式（不推荐），需要统一源地址并明确配置CORS：

from flask_cors import CORS
# 同时允许localhost和127.0.0.1的前端源，根据实际使用的地址调整
CORS(app, origins=["http://localhost:5173", "http://127.0.0.1:5173"])

但即使配置正确，Google的OAuth授权端点依然可能拒绝跨域AJAX请求，因此这只是辅助手段。

3. 检查Google OAuth控制台配置 #

确保在Google Cloud控制台的OAuth 2.0客户端ID配置中，已正确添加前端和后端的授权回调地址，且地址与实际请求的地址完全一致（包括http/https、域名/IP、端口）。

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