Laravel 8、Sanctum 和 Angular 8

Question

我有linux的主题环境。我已经使用 EnsureFrontendRequestsAreStateful、.env 进行了 cors.conf、session.conf、kernel:api 的配置。我阅读的所有文档中都包含所有这些内容。 Laravel 在 localhost:8000 本地主机中的角度：4200

特别是：

内核.php：

'api' => [
      \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
      'throttle:api',
...

cors.php

'paths' => [
    'api/*',
    'login',
    'logout',
    'sanctum/csrf-cookie'
],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,

圣所.php

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost:4200,localhost,localhost:8000,127.0.0.1,127.0.0.1:4200,127.0.0.1:8000')),

在.env中

SESSION_DOMAIN=.localhost

在 Angular 中，当我得到 csrf-cookie 响应时：

Bloccata Richiesta multiorigin (cross-origin): il criterio di corrispondenza dell'origine non consente la lettura della risorsa remota da http://localhost:8000/sanctum/csrf-cookie。动机：richiesta CORS non riuscita。

这是我的堆栈：

我哪里错了？ 谢谢了。

Answer 1

由于违反跨域资源共享或简称 CORS，您的请求被阻止。

当您从域 A 向域 B 发出请求时会出现此问题。在这种情况下，当您使用 localhost 时，我想您是从 ng 服务器 @localhost:4200 向 localhost:8000 发出请求，即 Laravel 服务器。

要解决这个问题，您需要在 Laravel 服务器的响应中添加 CORS 标头，即 localhost:8000。在简单的情况下，您可以在回复中添加此标头Access-Control-Allow-Origin: *

* 表示服务器愿意响应来自任何域的请求。这是生产中的一个严重安全问题，因此您应该始终指定应该允许 CORS 使用的确切域，例如：

Access-Control-Allow-Origin: http://localhost:4200

有多种方法可以做到这一点。出于开发目的，您可以使用 CORS 插件，例如用于 FireFox 的 CORS everywhere。

对于开发服务器，您还可以在 Web 服务器中或通过 Laravel 添加 CORS 标头。从here 使用laravel-cors 包的简单方法

您还可以在Mozilla Site 上进一步阅读 CORS