Laravel Cors 中间件不适用于 POST 请求

Question

所以我使用Laravel 5.8 作为API 到ReactJS 视图。

我已经创建了一个 'cors' 中间件，我在 Kernel.php 文件中注册了它，并且我在我正在使用的 api-routes 上使用它。我使用 GET 请求进行了测试，它可以工作，但是当我使用 POST 请求进行测试时，我得到了 cors 错误：

从源“http://localhost:3000”获取“http://localhost:8000/api/posts”的访问权限已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

所以我有我的 api.php ("/routes/api.php"):

Route::get('/posts', 'PostController@index')->middleware('cors');
Route::post('/posts', 'PostController@store')->middleware('cors');

我的 cors.php 中间件：

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
  /**
   * 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')
      ->header('Access-Control-Allow-Headers', 'Content-Type, Accept, Authorization, X-Requested-With, Application');
  }
}

在我的 Kernel.php ("/app/Http/Kernel.php") 上，我使用 'cors' 中间件更新了 "$routeMiddleware" 数组

'cors' => \App\Http\Middleware\Cors::class, 

现在在我的 React 项目中，我的 api.js（我在其中编写了发出请求的代码）：

// get Posts
export const getPosts = () => {
  return fetch('http://localhost:8000/api/posts')
    .then(res => res.json())
    .then(json => console.log(json))
    .catch(err => console.log(err));
}

// create new post
export const createPost = (post) => {

  return fetch('http://localhost:8000/api/posts',
  {
    method: 'post',
    headers: {
      'Accept': 'application/json, text/plain, */*',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(post)
  })
  .then(res => res.json())
  .then(res => console.log(res));
}

我不明白为什么当我尝试Get request 时一切正常，但是当我尝试Post Request 时，我得到了CORS error。有人遇到过这个问题吗？

Answer 1

把你的中间件改成这个

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
  /**
   * Handle an incoming request.
   *
   * @param  \Illuminate\Http\Request  $request
   * @param  \Closure  $next
   * @return mixed
   */
  public function handle($request, Closure $next)
  {
    $domain = parse_url($_SERVER['HTTP_REFERER']);
    $host = '*';
    if (isset($domain['host'])) {
        $host = $domain['host'];
    }
    return $next($request)
      ->header('Access-Control-Allow-Origin', $host)
      ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
      ->header('Access-Control-Allow-Headers', 'Content-Type, Accept, Authorization,     X-Requested-With, Application');
  }
}

但一旦投入生产，您需要通过环境变量来限制允许的主机。

您也可以只使用barryvdh/laravel-cors Link here

Answer 2

为我解决这个问题的唯一方法是将 cors 中间件类放在 $middleware 数组的顶部 Kernel.php

protected $middleware = [
        \App\Http\Middleware\Cors::class,
        \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,

    ];

这是我正在使用的 cors 中间件

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $response = $next($request);

        $response->header("Access-Control-Allow-Origin","*");
        $response->header("Access-Control-Allow-Credentials","true");
        $response->header("Access-Control-Max-Age","600");    // cache for 10 minutes

        $response->header("Access-Control-Allow-Methods","POST, GET, OPTIONS, DELETE, PUT"); //Make sure you remove those you do not want to support

        $response->header("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization, X-Requested-With, Application");

        return $response;
    }

}

希望有一天它会对某人有所帮助。

Answer 3

因此，当我在 api.php 中使用自己的 CORS 中间件而不使用水果蛋糕 (barryvdh/laravel-cors) 时，我遇到了同样的问题并花了数小时调试并找出问题所在。

经过数小时的调试和挫折后，我发现当您在组中使用中间件时，它不会立即得到应用。

laravel 如何匹配路由并“应用”中间件：

当您发送请求时，laravel 会读取 api.php 并“注册”所有路由和中间件并“记住”它们而不实际执行它们。在它“注册”所有这些之后（读取整个 api.php 文件），它执行一个函数，在该函数中输入来自 URL 的路径和请求中使用的 HTTP 方法，然后开始查找匹配的路由URL 和 HTTP 方法，找到一个后，它会执行该路由所在的那些中间件，然后执行控制器方法。

例如，当您向/api/posts 发送GET 请求时，您的代码会匹配资源方法index，然后执行中间件cors，因此它可以工作并从您的控制器返回数据。

为什么 POST、PUT、DELETE 和 PATCH 不适用于这种方法：

当你向/api/posts发送POST、PUT、DELETE或PATCH请求时，浏览器会先发送OPTIONS请求，所以laravel“注册”所有路由然后执行使用 URL 和 HTTP 方法的“匹配”（现在是 OPTIONS）。

但是没有路由有OPTIONS 和resources 也没有OPTIONS 方法，所以由于没有路由有OPTIONS 方法，所以laravel 不匹配任何东西，因此它不会执行您最终处理 OPTIONS 方法的那些中间件。

api.php 示例

Route::post('/posts', 'PostController@store')->middleware('cors');

Laravel 中的匹配函数：

“匹配”函数名为findRoute，位于vendor/laravel/framework/src/Illuminate/Routing/Router.php。

/**
 * Find the route matching a given request.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Routing\Route
 */
protected function findRoute($request)
{
    $this->current = $route = $this->routes->match($request);

    $this->container->instance(Route::class, $route);

    return $route;
}

当您使用error_log(json_encode($route), 0); 记录$route，然后发出GET 请求，然后查看错误日志，您可以看到成功的“匹配”并且它应用了cors 控制器： {"uri":"api\/posts","methods":["GET","HEAD"],"action":{"middleware":["cors"],"uses":"App\\Http\\Controllers\\PostController@index","controller":"App\\Http\\Controllers\\PostController@index","namespace":null,"prefix":"api","where":[]},"isFallback":false,"controller":null,"defaults":[],"wheres":[],"parameters":[],"parameterNames":[],"computedMiddleware":null,"compiled":{}}

但是当您发送POST 请求时，会发生这种情况： {"uri":"api\/posts","methods":["OPTIONS"],"action":{"uses":{}},"isFallback":false,"controller":null,"defaults":[],"wheres":[],"parameters":[],"parameterNames":[],"computedMiddleware":null,"compiled":{}}

您可以看到实际上发送了OPTIONS 方法（因为浏览器首先发送OPTIONS 方法）并且没有匹配到任何中间件，因此PUT 请求失败并出现CORS 错误（@987654354 @)

总结及解决办法：

• $routeMiddleware 数组中的中间件被应用在之后 Laravel 成功地将路由与路径和 HTTP 方法匹配，因为不同的路由可以有不同的中间件。
• $middleware 数组中的中间件（全局中间件）在之前应用 Laravel 开始注册和匹配路由。

要解决这个问题，您必须在$middleware 数组中使用一个全局中间件，该中间件处理OPTIONS 方法。您可以只使用处理它的Fruitcake，然后您可以在api.php 中使用您自己的 CORS 中间件，可以根据自己的喜好设置不同的标头（例如，不同路由/组/前缀的不同允许来源。

Answer 4

我通过使用 FormData 而不是 JSON.stringfy 解决了这个问题：

所以，我改变了：

let data = JSON.stringify({firstname:'John', familyname: 'Doe'});

到：

let data = new FormData();
data.append('firstname','John');
data.append('lastname','Doe');

完整的代码是这样的：

fetch(YOUR_API_URL, {
    method: 'POST',
    body: data
    }).then(
    res =>res.json()
        .then(res => console.log(res))
    ).catch(err => console.log(err));