Laravel API CORS 模式不起作用答案

【问题标题】：Laravel API CORS mode not workingLaravel API CORS 模式不起作用
【发布时间】：2017-03-29 19:26:10
【问题描述】：

我进行了大量研究，并实施了以下中间件来解决我不断遇到的 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,PATCH,DELETE,OPTIONS')
        ->header('Access-Control-Allow-Headers', 'content-type');
    }
}

?>

内核.php

protected $routeMiddleware = [
    'auth' => \App\Http\Middleware\Authenticate::class,
    'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
    'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
    'cors' => App\Http\Middleware\Cors,
];

Routes.php

Route::post('/content', array('middleware' => 'cors', 'uses' => 'Test@save'));

这似乎配置正确。但是当我使用 fetch API 发出请求时......

fetch('http://laravel.dev/content', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin':'*'
        },
        body: JSON.stringify({

        })
    })
    //.then((response) => response.json())
    .then((response) => response.text()) 
    .then((text) => {
        console.log(text);
    });

我仍然收到此错误...

Fetch API cannot load http://laravel.dev/content. 
Response to preflight request doesn't pass access 
control check: No 'Access-Control-Allow-Origin' header 
is present on the requested resource.

我尝试将 no-cors 模式添加到我的 fetch 响应中，它成功了，我得到了一个不透明的响应，但我需要 cors 模式来获得正确的请求。

值得注意的是，我的 App 和我的 Laravel restAPI 位于 XAMPP 上的同一个 htdocs 文件夹中。我不确定这是否是个问题。

我还尝试在我的 Routers.php 文件顶部添加标题，但我仍然遇到相同的错误。我什至可以使用 laravel 配置一个 restAPI 吗？

【问题讨论】：

对于 cors，你可以试试这个 GitHub [repo(github.com/barryvdh/laravel-cors)]。它非常易于使用并且可以在我的项目中使用。
请求标头中不应存在此标头：Access-Control-Allow-Origin
同意以上观点。对我来说，它也必须是全球中间件组的一部分
@Amit 链接给我 404 未找到
尝试凭证选项，credentials: 'same-origin' 或 credentials: 'include'

标签： laravel reactjs cors fetch

【解决方案1】：

尝试删除

->header('Access-Control-Allow-Headers', 'content-type');

在 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)
       {
          return $next($request)
           ->header('Access-Control-Allow-Origin', '*')
           ->header('Access-Control-Allow-Methods', 'GET,POST,PUT,PATCH,DELETE,OPTIONS');

       }
  }

 ?>

它对我有用。我希望它对你有帮助

【讨论】：