没有将 Cors 标头添加到响应中

Question

当尝试从 React 应用程序使用 API（本地托管）登录时，我每次都会收到此错误：

我知道有很多关于这个主题的主题，但没有一个对我有帮助。也许是因为我错过了一些东西，或者不明白这个概念。

我不知道如何解决这个问题。

我已经尝试过的事情：
- 添加了一个 HTTP 中间件（代码如下）：没用。
- 尝试使用 spatie/laravel-cors 包修复它：没用。
- 尝试使用barryvdh/laravel-cors 修复它：也没有用。

我没有想法。有人知道我做错了什么吗？

我的代码

protected $middleware = [
    \App\Http\Middleware\CheckForMaintenanceMode::class,
    \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
    \App\Http\Middleware\TrimStrings::class,
    \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    \App\Http\Middleware\TrustProxies::class,
    \Spatie\Cors\Cors::class, // <-- this line would be pointed to my own middleware when that would be in use
];

如果我在哪里使用自己的中间件，则指向以下代码而不是 \Spatie\Cors\Cors::class

class ApiCors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, PATCH')
            ->header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');

    }
}

Answer 1

实现 CORS 支持有一些棘手的问题：

1. 您的 CORS 中间件应该添加到 global 中间件堆栈中，因为浏览器可以发送 Preflight 请求，并且您不希望每个 API 路由都有特定的 OPTIONS 路由。

2. 中间件不需要将预检请求更深入地传递给应用程序。

3. CORS 标头应同时添加到 Preflight 请求和 API 请求中。

所以，应该是这样的：

创建中间件：

php artisan make:middleware ApiCors

放代码：

<?php

namespace App\Http\Middleware;

use Closure;

class ApiCors {

  /**
   * Handle an incoming request.
   *
   * @param  \Illuminate\Http\Request $request
   * @param  \Closure $next
   *
   * @return mixed
   */
  public function handle($request, Closure $next)
  {
    $isPreflight = $request->isMethod('options') && $request->hasHeader('origin');

    // we don't need to process Preflight request further
    $response = $isPreflight ? response()->make() : $next($request);

    if($isPreflight) {
      $response
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, PATCH')
        ->header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization')
        ->header('Access-Control-Max-Age', 86400);
    }
    $response->header('Access-Control-Allow-Origin', $isPreflight ? '*' : ($request->header('origin') ?? '*'));

    return $response;
  }
}

注册中间件：

app/Http/Kernel.php:

<?php
// ...
use App\Http\Middleware\ApiCors;

class Kernel extends HttpKernel {
  // ...
  protected $middleware = [
    // ...
    ApiCors::class,
  ];
  // ...
  protected $middlewarePriority = [
    ApiCors::class, // move to the top of the chain
    // ...
  ];
}

测试中间件：

让我们添加简单的 API 路由。

routes/api.php:

Route::put('/v1/test', function () {
  return response()->json(['answer' => 42]);
});

让我们启动简单的服务器（在 Laravel 项目根文件夹中运行）：

php -S localhost:8088 -t public

接下来，打开任意网页（或使用当前网页）并在开发者控制台中运行：

fetch('http://localhost:8088/api/v1/test', {
  method: 'PUT', headers: { 'accept': 'application/json' }
}).then(r => r.json()).then(console.log.bind(console))

你应该得到回应：

{answer: 42}

---

不要忘记您应该将 [external] API 路由添加到 routes/api.php，不要 添加到 routes/web.php，因为 Web 路由器组有许多中间件，它们可能会干扰您的 api 的，比如VerifyCsrfToken。

MDN: Cross-Origin Resource Sharing (CORS)