Laravel与Angular集成时安全路由CORS错误问题求助

以下是针对你遇到的问题的具体排查和解决步骤：

1. 核心问题根源 #

能获取token但安全路由报错，大概率是OPTIONS预请求未被正确处理，或者CORS头配置不符合浏览器安全规则，也可能是中间件顺序、配置缓存导致的问题。

2. 具体解决步骤 #

方案一：优先使用Laravel自带CORS配置（推荐） #

Laravel自带的HandleCors中间件已经足够处理大部分场景，无需自定义：

• 修改config/cors.php配置，确保覆盖所有需要的路由，并且符合浏览器要求：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie', 'oauth/*', '/user'], // 确保/user路径被包含，若路由带/api前缀则/api/user已被api/*覆盖
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:4200'], // 替换为你的Angular实际域名，禁止用*（带Authorization头的请求不允许通配）
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'], // 或明确指定Authorization, Content-Type等
    'exposed_headers' => [],
    'max_age' => 86400, // 缓存预请求结果，减少OPTIONS请求次数
    'supports_credentials' => true, // 带Authorization头或Cookie时必须设为true
];

• 确保app/Http/Kernel.php的api中间件组包含HandleCors，且放在最前面：

protected $middlewareGroups = [
    'api' => [
        \Illuminate\Http\Middleware\HandleCors::class,
        'throttle:api',
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
    ],
];

• 若安全路由不在api组，手动给路由组添加cors中间件（自带的HandleCors已注册为cors别名）：

Route::group(['middleware' => ['cors', 'json.response']], function () {
    Route::get('/user', 'UserController@user')->middleware(['auth:api']);
});

方案二：修复自定义CORS中间件 #

如果坚持用自定义中间件，必须先处理OPTIONS预请求，避免被auth:api拦截：

• 修改自定义CORS中间件代码：

public function handle(Request $request, Closure $next)
{
    // 优先处理OPTIONS预请求，直接返回响应，不进入后续中间件
    if ($request->isMethod('OPTIONS')) {
        return response()->json(['status' => 'ok'], 200)
            ->header('Access-Control-Allow-Origin', 'http://localhost:4200')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization')
            ->header('Access-Control-Max-Age', 86400);
    }

    return $next($request)
        ->header('Access-Control-Allow-Origin', 'http://localhost:4200')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
        ->header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization');
}

• 在Kernel.php的$routeMiddleware中注册中间件，确保路由组将cors放在最前面。

3. 必做操作：清除配置缓存 #

Laravel的配置缓存可能导致修改不生效，运行以下命令：

php artisan config:clear
php artisan route:clear

4. Angular端配合设置 #

如果请求需要携带凭证（如Authorization头），确保HttpClient请求开启withCredentials：

this.http.get('/api/user', { withCredentials: true }).subscribe(response => {
    // 处理响应
});

常见坑点提醒 #

• 禁止同时使用自带CORS中间件和自定义中间件，会导致头冲突。
• Access-Control-Allow-Origin使用*时，浏览器会阻止带Authorization头的请求，必须指定具体域名。
• OPTIONS请求不会携带Authorization头，若被auth:api拦截会返回401，浏览器会判定为CORS错误。

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