我之前也碰到过一模一样的情况——Postman测网关完全正常，但React一请求就报CORS错误。核心原因是浏览器会自动发送OPTIONS预请求，而你的API Gateway默认没配置处理这个请求的规则，哪怕Cloud Function里已经配了CORS也没用，因为预请求先到网关，网关没返回正确的响应头，浏览器直接就把请求拦截了。

下面是具体的解决步骤：

1. 修改API Gateway的OpenAPI配置文件 #

你需要在网关的OpenAPI YAML配置里添加CORS相关的规则，主要是为每个端点添加OPTIONS方法的处理，返回必要的CORS响应头。

举个示例配置（根据你的实际情况调整）：

swagger: '2.0'
info:
  title: My Protected Gateway
  version: 1.0.0
# 指向你的Cloud Function后端
x-google-backend:
  address: https://REGION-YOUR_PROJECT_ID.cloudfunctions.net/hello
# 配置API Key验证（如果你的网关用了API Key）
securityDefinitions:
  api_key:
    type: apiKey
    name: key
    in: query
security:
  - api_key: []

paths:
  /hello:
    # 你的GET请求配置
    get:
      summary: Hello endpoint
      responses:
        '200':
          description: Successful response
    # 关键：添加OPTIONS方法处理CORS预请求
    options:
      summary: Handle CORS preflight
      responses:
        '200':
          description: Preflight response
          headers:
            Access-Control-Allow-Origin:
              type: string
              # 生产环境建议指定具体域名，不要用*
              default: 'https://example.netlify.app'
            Access-Control-Allow-Methods:
              type: string
              default: 'GET, OPTIONS'
            Access-Control-Allow-Headers:
              type: string
              default: 'Content-Type'
      # 可以选择把OPTIONS请求转发到Cloud Function，或者直接让网关返回头（更高效）
      x-google-backend:
        address: https://REGION-YOUR_PROJECT_ID.cloudfunctions.net/hello

重点注意：

• Access-Control-Allow-Origin要设置成你的React应用域名https://example.netlify.app，生产环境别用*，避免安全风险。
• 如果你的Cloud Function已经能处理OPTIONS请求，就保留x-google-backend指向它；如果不想让预请求到后端，也可以去掉这部分，让网关直接返回响应头。

2. 重新部署API Gateway配置 #

修改完YAML文件后，用gcloud命令更新网关配置：

首先创建新的API配置：

gcloud api-gateway api-configs create my-new-config --api=YOUR_API_NAME --openapi-spec=./your-config.yaml --project=YOUR_PROJECT_ID

然后更新网关实例指向新配置：

gcloud api-gateway gateways update YOUR_GATEWAY_NAME --api-config=my-new-config --location=YOUR_LOCATION --project=YOUR_PROJECT_ID

3. 验证配置是否生效 #

部署完成后（可能需要等几分钟生效），用curl测试OPTIONS请求：

curl -X OPTIONS https://my-gateway-a12bcd345e67f89g0h.uc.gateway.dev/hello?key=example -H "Origin: https://example.netlify.app" -v

查看响应头里是否包含Access-Control-Allow-Origin、Access-Control-Allow-Methods这些字段，如果有，说明配置成功了。

额外提示 #

• 确保Cloud Function里的CORS配置和网关的一致，避免冲突。
• 如果还是有问题，检查网关的日志（在Cloud Logging里找API Gateway的日志），看看预请求有没有被正确处理。

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