添加自定义/Authorization头时Axios GET请求触发Next.js 12 CORS错误

问题根源 #

带自定义头（如X-Custom-Header）或Authorization头的请求会触发浏览器的预检OPTIONS请求，此时仅设置Access-Control-Allow-Origin: *无效——浏览器禁止通配符与自定义头/凭证类请求共存，必须指定明确的请求源。

解决方案一：修正Nginx的CORS配置 #

在Nginx的后端站点配置中，替换原有的通配符CORS规则，添加以下配置：

location / {
    # 允许指定源（Next.js开发地址）
    add_header Access-Control-Allow-Origin "http://localhost:3000" always;
    # 允许自定义头、Authorization等
    add_header Access-Control-Allow-Headers "X-Custom-Header, Authorization, Content-Type" always;
    # 允许预检请求的方法
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE" always;
    # 允许携带凭证（如果需要）
    add_header Access-Control-Allow-Credentials "true" always;

    # 处理预检OPTIONS请求，直接返回204
    if ($request_method = OPTIONS) {
        return 204;
    }

    # 保留原有PHP转发配置
    fastcgi_pass php容器地址:9000;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
}

注意：always参数必须添加，确保错误响应也能带上CORS头；如果有多个前端源，可通过Nginx变量动态匹配，避免硬编码。

解决方案二：PHP端补充CORS处理（若Nginx配置未生效） #

如果PHP框架自身处理响应头，需在入口文件（如index.php）添加：

<?php
header("Access-Control-Allow-Origin: http://localhost:3000");
header("Access-Control-Allow-Headers: X-Custom-Header, Authorization, Content-Type");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Credentials: true");

// 处理OPTIONS预检请求
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(204);
    exit;
}

解决方案三：Next.js开发环境代理（更便捷） #

在next.config.js中配置代理，让前端请求通过Next.js转发，绕开浏览器CORS限制：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://你的后端地址:端口/:path*',
      },
    ];
  },
};

之后前端请求改为：

const response = axios.get('/api/entries', {
  headers: {
    'X-Custom-Header': 'foobar'
  },
  params: data,
}).then(res => {
  console.log(res);
})

验证步骤 #

1. 修改配置后重启Nginx和PHP容器
2. 打开浏览器开发者工具，查看网络面板的OPTIONS请求，确认响应头包含正确的Access-Control-*字段
3. 重新发起带自定义头的请求，检查是否正常响应

内容的提问来源于stack exchange，提问作者litosh-web