React Cloud Run应用请求Google API Gateway遭CORS拦截，求排查方案

核心场景 #

React CRA应用部署在Google Cloud Run，后端Django服务同样部署在Cloud Run，通过Google API Gateway对外暴露API，采用Auth0认证。当前存在两个核心问题：

1. 本地开发时请求触发CORS拦截错误
2. 生产环境请求未被代理转发，返回405错误

本地CORS问题排查与修复 #

1. 修正代理协议配置 #

你当前在package.json中配置的代理使用http://{api gateway url}，但Google API Gateway默认使用HTTPS，导致请求被重定向到HTTPS地址，而重定向后的预请求（OPTIONS）未携带正确的CORS响应头，触发拦截。

解决方案：将代理地址改为HTTPS协议：

"proxy": "https://{api gateway url}",

2. 完善API Gateway的CORS配置 #

仅设置allowCors: True不足以确保所有CORS响应头正确返回，需要在OpenAPI规范中明确定义预请求（OPTIONS）的响应头：

x-google-endpoints:
- name: "{api gateway url}"
  allowCors: True
paths:
  # 为所有API路径添加OPTIONS方法处理
  /api/{+path}:
    options:
      responses:
        '200':
          description: Preflight response
          headers:
            Access-Control-Allow-Origin:
              type: string
              default: "*"
            Access-Control-Allow-Methods:
              type: string
              default: "DELETE, GET, OPTIONS, PATCH, POST, PUT"
            Access-Control-Allow-Headers:
              type: string
              default: "accept, authorization, content-type, origin"

3. 确认Django中间件顺序 #

corsheaders.middleware.CorsMiddleware必须放在所有其他中间件之前（尤其是django.middleware.common.CommonMiddleware），否则无法正确注入CORS响应头：

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 其他中间件...
]

生产环境代理失效与405问题修复 #

1. 明确：CRA的proxy仅在本地开发生效 #

Create React App的package.json代理配置仅适用于本地开发服务器，生产构建后的静态文件不具备代理能力。你在生产环境添加的代理配置完全无效，这是核心问题。

解决方案：直接在React代码中配置axios的基础URL为API Gateway的HTTPS地址：

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://{api gateway url}',
  headers: {
    'Content-Type': 'application/json',
  },
});

// 后续请求使用这个实例
api.get('/api/users/', { headers: { Authorization: 'Bearer {token}' } });

2. 排查405错误原因 #

405表示请求方法不被允许，可能的原因：

• API Gateway的OpenAPI规范中未为目标路径配置对应的HTTP方法（比如GET/POST），或未配置OPTIONS方法处理预请求
• Django视图未实现对应HTTP方法的处理逻辑
• 请求路径与API Gateway/Django的路由配置不匹配

排查步骤：

• 使用curl直接请求API Gateway地址，验证是否正常：

curl -v https://{api gateway url}/api/users/ -H "Authorization: Bearer {valid-token}"

• 检查API Gateway的路由配置，确保目标路径映射到Django服务的正确地址，且包含所需的HTTP方法
• 确认Django的urls.py中正确配置了/api/users/的路由，并支持对应请求方法

通用验证步骤 #

• 检查CORS响应头：用浏览器开发者工具查看请求的响应头，确认是否存在Access-Control-Allow-Origin、Access-Control-Allow-Methods等字段
• 验证Auth0令牌：使用Auth0的令牌验证工具确认令牌有效，且包含访问API所需的权限
• 测试Django服务：直接请求Django Cloud Run的地址（绕过API Gateway），验证服务本身是否正常响应，且返回正确的CORS头

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