预检 Headers 不符合预期

Question

我正在尝试从 Angular 8 应用向 Laravel 5.8 Passport API 发送请求，但没有成功。我的意思是，只取得了有限的成功。当我将 Angular 请求中的 withCredientials 设置为 true 时，Preflight headers 试图查看 API 是否会 return 正确的 headers，包括 Access-Control-Allow-Credentials：是的，但响应显示没有这样的 header，即使我将其设置到后端。

如果我不设置 withCredentials，响应 headers 包括 Access-Control-Allow-Credentials: true，正如预期的那样，但我也需要在预检响应中包含该响应。

我尝试使用

将预检请求包在单独的块中

    if (!$_SERVER['REQUEST_METHOD']=='OPTIONS')

并明确设置 header 响应，但也没有成功。附注是，从 Postman 请求相同的 URL 会按预期工作（自从 Postman 不会混淆 CORS 以来）。

正在从以下代码片段触发请求：

    await this.http.post(this.logInEndPoint, credentials, {
        headers: this.httpHeaders,
        withCredentials: true
    }).subscribe(async res => {
    ...

CORS 中间件如下所示：

    $res->headers->set('Content-Type', 'application/json');
    $res->headers->set('Access-Control-Allow-Origin', 'http://127.0.0.1:4200');
    $res->headers->set('Access-Control-Allow-Credentials', 'true');
    $res->headers->set('Access-Control-Max-Age', '60');
    $res->headers->set('Access-Control-Allow-Headers', 'x-requested-with, Content-Type, origin, authorization, accept, client-security-token');
    $res->headers->set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

    if (!$_SERVER['REQUEST_METHOD']=='OPTIONS') {
      $next($res);
    } else {
      return $res;
    }

这就是我定义使用 CORS 中间件的地方 api.php

    Route::middleware('web', 'json.response', 'cors')->group(function() {
       Route::post('login', 'AuthController@login');

    ...

我期待 "Successfully logged in" 消息，但却得到了对“http://127.0.0.1:8000/api/login' from origin 'http://127.0.0.1:4200”处的 XMLHttpRequest 的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：值响应中的 'Access-Control-Allow-Credentials' header 是 '' 当请求的凭据模式是 'include' 时，它必须是 'true'。 XMLHttpRequest 发起的请求的凭据模式由 withCredentials 属性控制。在开发人员工具中。

Answer 1

经过几天与这个问题的斗争，我终于弄明白了。如果我必须总结大多数问题，与 Angular 消耗 Laravel API 相关，我会指出后端的 header 设置。对我来说，它在自定义 CORS 中间件中的某个地方。
老实说，我不确定上面的配置到底出了什么问题（我猜是在 Allow-Methods header 中），但我会分享我是如何解决我的问题的。
首先，我删除了我制作的所有自定义中间件。我开始使用 Barry vd. Heuvel's CORS 一个，只为 API 的组添加它。在那里，我更改了默认配置。我将 allowOrigins 设置为我的 Angular 服务器 URI，并将 allowedMethods 设置为我期望使用的请求。发布 CORS 配置文件后，我确保运行我的 Angular 应用程序在 127.0.0.1（而不是本地主机）上。我对 Laravel 服务器所做的也是如此。
运行将两个应用程序连接到同一个 IP 地址并使用新的 CORS 中间件后，一切运行顺利且没有问题。

预检 Headers 不符合预期

Preflight Headers Not As Expected

php

cors

laravel

preflight

angular