Laravel API 搭配 Angular 5 出现 Access-Control-Allow-Origin 跨域问题

你遇到的是浏览器同源策略导致的CORS（跨域资源共享）问题——你的Angular前端（通常运行在http://localhost:4200）和Laravel后端（http://127.0.0.1:8000）属于不同源，浏览器会拦截这类跨域请求，除非后端明确配置允许跨域访问。

下面给你两种适配Laravel 5.6版本的可靠解决方案：

方法一：手动创建CORS中间件（原生无依赖） #

这种方式不需要额外安装包，完全基于Laravel原生能力实现：

1. 生成CORS中间件
   在终端运行Artisan命令创建中间件文件：

php artisan make:middleware Cors

2. 编写跨域处理逻辑
   打开app/Http/Middleware/Cors.php，替换handle方法的内容：

public function handle($request, Closure $next)
{
    // 允许你的Angular前端域名，生产环境建议不要用*允许所有
    $response = $next($request);
    $response->headers->set('Access-Control-Allow-Origin', 'http://localhost:4200');
    $response->headers->set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    $response->headers->set('Access-Control-Allow-Headers', 'Content-Type, Accept, Authorization, X-Requested-With');
    $response->headers->set('Access-Control-Allow-Credentials', 'true');

    // 处理浏览器的OPTIONS预检请求，直接返回200状态码
    if ($request->getMethod() === "OPTIONS") {
        return response('', 200);
    }

    return $response;
}

3. 注册中间件
   打开app/Http/Kernel.php，将CORS中间件添加到全局中间件数组（确保所有请求都应用跨域规则）：

protected $middleware = [
    // ... 保留其他原有中间件
    \App\Http\Middleware\Cors::class,
];

如果只想给API路由应用跨域规则，也可以添加到路由中间件数组：

protected $routeMiddleware = [
    // ... 保留其他原有中间件
    'cors' => \App\Http\Middleware\Cors::class,
];

然后在routes/api.php中给OAuth路由组绑定该中间件：

Route::group(['middleware' => ['cors']], function () {
    // 绑定Passport的token请求路由
    Route::post('/oauth/token', '\Laravel\Passport\Http\Controllers\AccessTokenController@issueToken');
});

方法二：使用第三方CORS包（更便捷） #

推荐使用barryvdh/laravel-cors包，它已经封装了完善的跨域处理逻辑：

1. 安装适配版本的包
   终端运行Composer命令（适配Laravel 5.6的版本）：

composer require barryvdh/laravel-cors:^0.11.0

2. 注册服务提供者
   打开config/app.php，在providers数组中添加服务提供者：

Barryvdh\Cors\ServiceProvider::class,

3. 发布配置文件
   运行命令生成CORS配置文件：

php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

4. 配置跨域规则
   打开config/cors.php，修改关键配置项：

return [
    'supportsCredentials' => true,
    'allowedOrigins' => ['http://localhost:4200'], // 你的Angular前端地址
    'allowedHeaders' => ['Content-Type', 'Accept', 'Authorization'],
    'allowedMethods' => ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    'exposedHeaders' => [],
    'maxAge' => 0,
];

5. 应用中间件
   在app/Http/Kernel.php中，将中间件添加到全局中间件数组：

protected $middleware = [
    // ... 保留其他原有中间件
    \Barryvdh\Cors\HandleCors::class,
];

额外提醒 #

• 你的请求中密码传的是哈希后的字符串：0a09943d507c591ae7269042a57db16ac9a2b971，但password授权模式需要明文密码——Laravel Passport会自动验证哈希值，所以这里需要改成明文密码，否则后续会出现验证失败的问题。
• 确保你已经正确配置Laravel Passport（比如运行过php artisan passport:install生成客户端ID和密钥）。

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