Next.js迁移后请求AWS服务器遇CORS错误，配置代理仍无效求方案

你遇到的是浏览器跨域资源共享限制问题，已配置next.config.js的rewrites但未生效，可尝试以下几种实用方案：

1. 排查Rewrites配置的有效性 #

你的rewrites规则可能存在路径匹配或调用逻辑问题：

• 确认destination是否包含完整的AWS接口路径前缀，比如AWS接口为https://xxx.aws.com/api/data，则destination需设为https://xxx.aws.com/api/:path*，保证路径参数能正确传递
• 核心检查：前端请求地址必须改为相对路径/api/xxx，而非直接请求AWS的完整域名——如果前端仍调用https://xxx.aws.com/xxx，rewrites规则根本不会触发
• 验证规则是否生效：启动Next.js时查看终端输出的rewrites日志，或在浏览器网络面板中确认请求地址是否变为http://localhost:3000/api/xxx

2. 用Next.js API路由做中转代理 #

如果rewrites方案不生效，直接编写API路由作为中间层：

1. 在pages/api目录下创建代理文件（如aws-proxy.js）：

export default async function handler(req, res) {
  const { path } = req.query;
  const targetUrl = `https://你的AWS接口地址/${path.join('/')}`;

  try {
    const response = await fetch(targetUrl, {
      method: req.method,
      headers: {
        ...req.headers,
        host: new URL(targetUrl).host, // 替换请求host为AWS服务器地址
      },
      body: req.body,
    });

    const data = await response.json();
    // 转发响应并设置允许跨域的头
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.status(response.status).json(data);
  } catch (error) {
    res.status(500).json({ error: '代理请求失败' });
  }
}

2. 前端请求时调用/api/aws-proxy?path=xxx/xxx，或调整路由参数让路径更贴合业务

3. 直接配置AWS服务器的CORS规则 #

这是根治跨域问题的方案：

• AWS API Gateway：进入控制台找到对应API，在「CORS配置」中添加http://localhost:3000到允许源列表，同时勾选需要的请求方法（GET/POST等），并允许自定义请求头
• S3静态资源：在桶的权限配置中修改CORS策略，示例规则如下（按需调整）：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>http://localhost:3000</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

• 注意：AWS的CORS配置修改后通常需要数分钟生效，需等待配置同步

4. 本地开发临时绕过方案 #

仅用于本地测试场景：

• 安装浏览器CORS插件（如Chrome的Allow CORS: Access-Control-Allow-Origin），开启后可直接绕过浏览器的跨域检查
• 启动Next.js时添加环境变量临时禁用证书校验（不推荐生产环境）：

NODE_TLS_REJECT_UNAUTHORIZED=0 next dev

5. 检查预飞行OPTIONS请求 #

错误提示预飞行请求失败，需确认：

• AWS服务器是否正确响应OPTIONS请求，返回Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等必要响应头
• 如果前端请求携带自定义头（如Authorization），AWS的CORS配置必须明确允许该头

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