React+Axios调用Laravel5 API遇Access-Control-Allow-Headers跨域错误求助

我之前在维护Laravel旧项目时也碰到过几乎一模一样的问题，结合你的代码和Laravel 5的特性，整理几个大概率能解决问题的方向：

1. 确认CORS中间件已正确注册 #

很多时候写了中间件却忘了把它加入Laravel的中间件栈，这是最容易忽略的步骤：

• 打开app/Http/Kernel.php，把你的CORS中间件加入全局中间件（对所有请求生效）：

protected $middleware = [
    // ... 其他默认中间件
    \App\Http\Middleware\CORS::class,
];

• 或者如果只想对API路由生效，可加入路由中间件组：

protected $routeMiddleware = [
    // ... 其他路由中间件
    'cors' => \App\Http\Middleware\CORS::class,
];

// 然后在routes/api.php中包裹API路由
Route::group(['middleware' => 'cors'], function () {
    // 所有API路由定义
});

2. 修正中间件的OPTIONS请求处理与头信息 #

你的中间件逻辑有两处可以优化，尤其是针对Laravel 5的特性：

use Illuminate\Http\Request;
use Closure;

class CORS {
    public function handle(Request $request, Closure $next) {
        // 明确列出允许的头，比通配符*更可靠（旧浏览器/服务器对*的支持不稳定）
        $headers = [
            'Access-Control-Allow-Origin' => '*',
            'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
            'Access-Control-Allow-Headers' => 'Authorization, Content-Type, Accept',
            'Content-Type' => 'application/json',
        ];

        // 处理OPTIONS预检请求，用Laravel原生的response辅助函数更稳妥
        if ($request->isMethod('OPTIONS')) {
            return response()->json('Preflight OK', 200, $headers);
        }

        // 给后续响应统一添加头，避免重复写header方法
        $response = $next($request);
        foreach ($headers as $key => $value) {
            $response->header($key, $value);
        }
        return $response;
    }
}

3. 修复Axios请求拦截器的Header覆盖问题 #

你的拦截器直接覆盖了config.headers对象，会丢失Axios默认携带的请求头（比如Accept），可能导致预检请求的头信息不匹配：

axios.interceptors.request.use(function (config) {
    const token = // 从cookie/store获取token的逻辑
    if (token) {
        // 只添加/修改Authorization字段，不要覆盖整个headers对象
        config.headers.Authorization = token;
    }
    return config;
});

4. 检查服务器层面的CORS配置（Nginx/Apache） #

如果你的Laravel部署在Nginx或Apache上，服务器本身可能已经设置了CORS头，和Laravel中间件的配置冲突：

• Nginx示例：确保配置中包含Authorization头，且不要重复设置：

location /api {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, PATCH, OPTIONS';
    add_header Access-Control-Allow-Headers 'Authorization, Content-Type, Accept';

    if ($request_method = 'OPTIONS') {
        return 204;
    }
    // 其他Nginx配置（比如fastcgi_pass等）
}

• 如果是Apache，检查.htaccess文件是否有类似的CORS配置，确保Authorization在允许列表中。

按这个顺序排查，基本能解决你碰到的授权头CORS错误。

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