React中Axios请求Laravel 10后端遇CORS问题排查

核心问题点 #

1. CORS凭证配置不匹配
   你的Axios请求设置了withCredentials: true，但Laravel的CORS配置中supports_credentials为false，这会导致浏览器拒绝处理响应，同时CORS相关头无法正确生效。

2. Laravel响应生成方式错误
   控制器直接返回json_encode($todos)，没有通过Laravel的响应系统处理，导致CORS中间件无法为响应添加必要的跨域头。

修复步骤 #

1. 调整CORS配置

修改config/cors.php中的supports_credentials为true：

'supports_credentials' => true,

2. 修正控制器返回逻辑

替换直接返回json_encode的写法，使用Laravel内置的响应方法，确保CORS中间件能处理响应头：

public function all()
{
    $todos = Todo::all();
    return response()->json($todos);
}

3. 验证CORS中间件是否启用

检查app/Http/Kernel.php的api中间件组，确保包含HandleCors中间件（Laravel 10默认已包含，若缺失则添加）：

protected $middlewareGroups = [
    'api' => [
        \Illuminate\Http\Middleware\HandleCors::class,
        // 其他中间件...
    ],
];

4. 清除配置缓存

修改配置后执行以下命令，确保新配置生效：

php artisan config:clear

原理说明 #

• 使用response()->json()会让Laravel的响应管道处理请求，CORS中间件会自动根据配置添加Access-Control-Allow-Origin、Access-Control-Allow-Credentials等必要头。
• 当请求携带凭证（withCredentials: true）时，后端必须开启supports_credentials，且allowed_origins无需手动指定具体域名（Laravel会自动匹配请求的Origin并返回对应的头）。

内容的提问来源于stack exchange，提问作者hadi.ghasemian