Angular Laravel 已被 CORS 策略阻止

如果你在使用 Angular 和 Laravel 构建 Web 应用程序时碰到 CORS (跨来源资源共享) 错误，请不要惊慌，这在开发中是一种很常见的情况。

什么是 CORS？

CORS 是一种跨域资源共享机制，允许 JavaScript 发起跨域请求，从而在浏览器中使网页能够获取对不同来源服务器上的资源的访问权限。如果对客户端进行 CORS 操作，则将允许客户端访问跨域请求。

为什么会报错？

如果在用 Angular 向 Laravel 发送请求时，返回的响应头没有包含 Access-Control-Allow-Headers 字段，则会出现此错误。这是因为浏览器在发送跨域请求时，会首先发送一个 OPTIONS 请求(Preflight Request)来询问服务器是否允许请求。

如果服务器响应头中没有或不包含 Access-Control-Allow-Headers，浏览器就会报错并拒绝响应。

如何避免？

要解决这个问题，只需在 Laravel 应用程序中添加中间件使其响应 OPTIONS 请求，同时将 Access-Control-Allow-Headers 字段添加到响应头中。

1. 创建一个名为 CORS.php 的中间件文件并添加以下代码：

<?php

namespace App\Http\Middleware;

use Closure;

class CORS
{
    public function handle($request, Closure $next)
    {
        $headers = [
            'Access-Control-Allow-Origin' => '*',
            'Access-Control-Allow-Methods' => 'GET, POST, PUT, PATCH, DELETE, OPTIONS',
            'Access-Control-Allow-Headers' => 'Content-Type, Authorization, X-Requested-With'
        ];

        if ($request->isMethod('OPTIONS')) {
            return response()->json('', 200, $headers);
        }

        $response = $next($request);
        foreach ($headers as $key => $value) {
            $response->header($key, $value);
        }

        return $response;
    }
}

2. 在 Kernel.php 文件中将新创建的中间件添加到路由中间件组中：

protected $middlewareGroups = [
    ...
    'cors' => \App\Http\Middleware\CORS::class,
    ...
];

3. 使用 cors 中间件作为 Laravel 应用程序的全局中间件，因此它将适用于你的整个应用程序：

protected $middleware = [
    ...
    \App\Http\Middleware\CORS::class,
    ...
];

总结

这些步骤将修复 Angular 和 Laravel 之间的跨域请求问题，并使你能够在浏览器中成功访问你的 API。