Next.js客户端调用API Gateway关联Lambda的FastAPI遇CORS错误

核心问题定位 #

客户端请求触发CORS错误且Lambda未收到请求，说明预飞行OPTIONS请求未通过浏览器校验——Next.js服务器端请求不走浏览器CORS机制，因此能正常访问，问题根源在API Gateway的CORS配置（尤其是预飞行请求处理）。

1. 修正API Gateway CORS配置（关键） #

当客户端开启withCredentials: true时，Access-Control-Allow-Origin不能用通配符*，必须指定具体源：

• 登录API Gateway控制台，进入目标API的资源页面
• 选中根资源/，点击Actions > Enable CORS
• 配置以下参数：
  • Access-Control-Allow-Origin：https://example.com
  • Access-Control-Allow-Headers：Authorization, Accept, Content-Type（包含客户端实际发送的所有请求头，避免宽泛通配符）
  • Access-Control-Allow-Methods：GET, POST, PUT, DELETE, OPTIONS
  • Access-Control-Allow-Credentials：勾选true
• 点击Enable CORS and replace existing CORS headers，务必部署API到对应阶段（配置仅在部署后生效）

2. 校验API Gateway OPTIONS方法集成 #

API Gateway自动生成的OPTIONS方法需确保为Mock集成，避免转发到Lambda：

• 检查所有需要访问的资源（如/api下的子路径）是否存在OPTIONS方法
• 确认OPTIONS方法的集成类型为Mock，响应状态码设为200，响应头与上述CORS配置完全一致
• 若手动修改过OPTIONS集成，重置为默认Mock配置

3. 调整客户端Axios配置 #

移除客户端请求中多余的响应头配置，优化实例：

import axios from 'axios';

export const api = (session: any) => {
    const headers: { [key: string]: string | number } = {
        "Accept": 'application/json',
    };

    if (session?.user) {
        headers.Authorization = session.user.token;
    }

    const instance = axios.create({
        baseURL: process.env.NEXT_PUBLIC_API_DOMAIN,
        withCredentials: true,
        headers
    });

    // 添加日志拦截器排查请求细节
    instance.interceptors.request.use(config => {
        console.log('请求头:', config.headers);
        return config;
    });

    instance.interceptors.response.use(response => {
        console.log('响应头:', response.headers);
        return response;
    }, error => {
        console.log('CORS错误详情:', error.message, error.response?.headers);
        return Promise.reject(error);
    });

    return instance;
};

注意：客户端无需携带Access-Control-*类响应头，这些是服务器返回的字段。

4. 对齐FastAPI CORS中间件配置 #

确保FastAPI的CORS规则与API Gateway一致，避免后续请求异常：

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://example.com"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

5. 排查Amplify重写规则 #

若配置过代理重写，确保规则未篡改请求头：

• 进入Amplify控制台App settings > Rewrites and redirects
• 检查API代理规则（如/api/* https://api.example.com/api/$1 200），确保未修改Origin头，否则会导致CORS校验失败

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