Angular Laravel 已被 CORS 策略阻止

什么是 CORS 策略?

CORS（跨源资源共享）是一种安全策略，用于限制 Web 页面或应用程序中的跨域 HTTP 请求。当应用程序在一个域中运行并请求另一个域中的数据时，浏览器通常会阻止此请求，以避免潜在的安全漏洞。

Access-Control-Allow-Headers 不允许请求标头字段 x-requested-with

当 Angular 应用程序在请求 Laravel 后端服务时，如果请求包含 x-requested-with 标头字段，就会发生 CORS 策略阻止。这是因为 Laravel 后端服务没有在响应中指定 x-requested-with 标头字段。

如何解决这个问题?

要解决此问题，需要在 Laravel 后端服务中配置 CORS。可以使用 Laravel 自带的 Cors Middleware 或 spatie/laravel-cors 等 Laravel 扩展库来实现。

以下是使用 Cors Middleware 进行配置的示例:

<?php
// app/Http/Kernel.php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    // ...

    protected $middleware = [
        // ...
        \Fruitcake\Cors\HandleCors::class,
    ];

    // ...
}

结论

要解决 Angular Laravel 跨域请求中的 CORS 策略阻止问题，需要在 Laravel 后端服务中配置 CORS。这可以通过使用 Laravel 自带的 Cors Middleware 或第三方扩展库来实现。