Laravel+Angular部署后触发CORS跨域拦截 原有配置失效求解决方案

问题根因梳理 #

• 自定义CORS中间件存在3处低级错误：头名拼写错误（Acess少写字母c，正确为Access）、第二个响应头名错误（允许请求头的头名应为Access-Control-Allow-Headers，错误写成了Access-Control-Allow-Origin）、未处理OPTIONS预检请求，导致预检请求返回结果不带CORS头。
• 中间件注册错误：Kernel.php的$routeMiddleware中你把自定义CORS中间件的别名写成了guest，和原有guest中间件重复覆盖，而路由中引用的是cors别名，中间件完全没有被加载。
• 自带CORS组件冲突：全局中间件已经加载了Laravel官方推荐的Fruitcake\Cors\HandleCors中间件，和自定义CORS逻辑冲突，无需重复开发。

可行解决方案 #

方案1：使用Laravel自带的Fruitcake CORS组件（推荐）

1. 删除你自己写的App\Http\Middleware\CORS中间件文件
2. 修正Kernel.php的$routeMiddleware，删掉最后一行重复的'guest' => \App\Http\Middleware\CORS::class
3. 执行命令发布CORS配置文件：php artisan vendor:publish --tag="cors"
4. 修改生成的config/cors.php配置：
   • paths数组添加api/*，覆盖所有API接口
   • allowed_origins修改为你的前端域名，或者填['*']允许所有域名访问
   • allowed_methods填['*']允许所有请求方法
   • allowed_headers填['*']允许所有请求头
   • 若使用Cookie身份验证，supports_credentials设为true，同时allowed_origins不能用通配符*，必须填写具体前端域名
5. 移除路由中的cors中间件引用，Fruitcake CORS为全局中间件自动生效：

Route::group(['middleware' => 'api','prefix' => 'auth'], function ($router) {
    Route::post('/login', [AuthController::class, 'login']);
    Route::post('/register', [AuthController::class, 'register']);
    Route::post('/logout', [AuthController::class, 'logout']);
    Route::get('/user-profile', [AuthController::class, 'userProfile']);    
});

6. 清理缓存生效：php artisan config:clear && php artisan route:clear

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

1. 修正中间件代码：

<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
class CORS
{
    public function handle(Request $request, Closure $next)
    {
        // 生产环境建议替换为具体前端域名
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
        header('Access-Control-Allow-Headers: Content-Type, X-Auth-Token, Authorization, Origin');
        // 处理OPTIONS预检请求直接返回
        if ($request->getMethod() == 'OPTIONS') {
            return response('', 200);
        }
        return $next($request);
    }
}

2. 修正Kernel.php的$routeMiddleware注册，改为正确的cors别名：

protected $routeMiddleware = [
    'auth' => \App\Http\Middleware\Authenticate::class,
    'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
    'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
    'can' => \Illuminate\Auth\Middleware\Authorize::class,
    'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
    'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
    'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
    'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
    'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    // 新增正确的cors中间件别名
    'cors' => \App\Http\Middleware\CORS::class,
];

3. 注释全局中间件中的Fruitcake CORS避免冲突：

protected $middleware = [
    // \App\Http\Middleware\TrustHosts::class,
    \App\Http\Middleware\TrustProxies::class,
    // 注释掉自带的CORS中间件
    // \Fruitcake\Cors\HandleCors::class,
    \App\Http\Middleware\PreventRequestsDuringMaintenance::class,
    \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
    \App\Http\Middleware\TrimStrings::class,
    \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
];

4. 清理缓存生效：php artisan config:clear && php artisan route:clear

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