React调用处理Google OAuth认证的Flask接口出现CORS错误

核心问题分析 #

1. CORS错误原因：用fetch调用Flask的/login路由时，fetch会自动跟随重定向请求Google授权页面，但Google服务器未配置允许http://localhost:3000的跨域请求，触发浏览器CORS拦截。
2. State不匹配错误原因：通过AJAX获取授权URL后跳转时，fetch默认不携带cookie，导致Flask生成的CSRF state存储的session与跳转后请求的session不关联，回调时无法匹配state。

方案一：直接跳转（最简单高效） #

放弃用fetch发起AJAX请求，让登录按钮直接触发浏览器跳转至Flask的/login路由，完全模拟手动访问的流程，从根源避免CORS和state问题。

React端修改代码：

function handleLogin() {
  window.location.href = '/login';
}

Flask端无需修改原有的/login和/auth路由，保持原样即可。

方案二：保留AJAX请求（需处理CORS和session） #

如果必须使用AJAX方式，需要配置CORS并确保session关联：

1. Flask端配置CORS
   安装flask-cors并初始化：

from flask_cors import CORS

app = Flask(__name__)
# 允许localhost:3000跨域，并支持携带凭证（cookie）
CORS(app, supports_credentials=True, origins="http://localhost:3000")

2. React端修改fetch请求
   添加credentials: 'include'确保携带cookie：

function handleLogin() {
  fetch('/login', {
    credentials: 'include'
  })
    .then(response => response.json())
    .then(response => {
      window.location.href = response.url;
    })
    .catch(error => {
      console.error(error);
    });
}

3. Flask端/login路由调整
   保持state正确存入session的前提下返回授权URL：

@app.route('/login')
def login():
    google = oauth.create_client('google')
    redirect_uri = url_for('authorize', _external=True)
    auth_response = google.authorize_redirect(redirect_uri)
    return {"status": 200, "url": auth_response.location}

这样AJAX请求会携带cookie，Flask的session能和后续跳转的请求关联，回调时state即可匹配。

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