Question

XMLHttpRequest无法加载http://myapi/api/rating。对预检请求的响应没有通过访问控制检查：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:8104＆＃39;因此不允许访问。响应的HTTP状态代码为403。

我无法弄清楚为什么我无法提出CORS请求。我在这里安装了中间件，将其添加到全局http内核中，但它仍然无法正常工作。试图创建一个自定义中间件给出stackoverflow建议，但也没有用。还尝试添加路由组。最后，我尝试在请求操作中手动设置响应标头。我真的卡住了 - 感谢帮助！

参见代码：https://gist.github.com/KerryRitter/0d7ababb7b9eb8d54f0ae55add9704a1

Answer 1

如果您使用的是Laravel 5.5＆amp; Laravel 5.x并面临与No 'Access-Control-Allow-Origin' header is present on the requested resource相同的问题。只需使用以下包并配置您的系统。

第1步：

composer require barryvdh/laravel-cors

第2步

您还需要将Cors\ServiceProvider添加到config/app.php提供商数组：

Barryvdh\Cors\ServiceProvider::class,

要允许所有路由使用CORS，请在HandleCors类的$middleware属性中添加app/Http/Kernel.php中间件：

全球用途：

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

对于中间件用途：

protected $middlewareGroups = [
   'web' => [
       // ...
   ],

   'api' => [
        // ...
        \Barryvdh\Cors\HandleCors::class,
    ],
];

第3步

安装完成后，在命令下方运行供应商文件。

php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

希望这个答案可以帮助那些面临同样问题的人。

Answer 2

https://github.com/barryvdh/laravel-cors

laravel-cors包允许您使用Laravel中间件配置发送跨源资源共享标头。

功能

处理CORS飞行前OPTIONS请求在您的回复中添加CORS标头

Answer 3

我最近在laravel 5.4中遇到了这个错误，我发送ajax post请求到我自己的网站，并且仍然得到同样的错误，我由于两个原因准确地面对这个错误，

error: XMLHttpRequest cannot load https://[mydomain].com/quote/short. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://[mydomain].com' is therefore not allowed access.

上述错误的原因是，我是从https域向http域发布请求，所以当我将其更改为https时，错误已解决，然后由于类似的原因再次出现相同的错误，这是原因，这一次，域名有www.而请求的域名没有，在我向两者添加www.后，它就像一个魅力。

对于跨源请求，我过去常常使用以下解决方案：

创建一个代码低于

的中间件（在我的情况下为cors）

return $next($request)
    ->header('Access-Control-Allow-Origin', '*')
    ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

将中间件插入kernal.php中的routeMiddleware数组

'cors' => \App\Http\Middleware\Cors::class,
将中间件添加到受尊重的路径

Route::get('myRoute', ['middleware' => 'cors' , 'uses'=> 'MyController@Action']

希望这个答案可以帮助那些面临同样问题的人。

Answer 4

简单的答案是将Access-Control-Allow-Origin标头设置为localhost或*。这是我通常的做法：创建一个名为Cors的简单中间件：

php artisan make:middleware Cors

将以下代码添加到app/Http/Middleware/Cors.php：

public function handle($request, Closure $next)
{
    return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
}

您可以将*替换为localhost或保持原样。

下一步是加载middleware。将以下行添加到$routeMiddleware中的app/Http/Kernel.php数组中。

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

最后一步是在要设置访问源标头的路由上使用中间件。假设您正在谈论laravel 5.3中的新api路由，则可以在app/Providers/RouteServiceProvider.php函数内部（您可以删除或注释该函数的先前代码）中的mapApiRoutes()进行此操作：

Route::group([
        'middleware' => ['api', 'cors'],
        'namespace' => $this->namespace,
        'prefix' => 'api',
    ], function ($router) {
         //Add you routes here, for example:
         Route::apiResource('/posts','PostController');
    });

Answer 5

您可以创建Cors中间件类并添加到kenel.php中的应用程序的全局HTTP中间件堆栈中。此堆栈中的中间件将在对应用程序的每个请求期间运行。将中间件添加到该堆栈后，您不想在api.php文件中运行它。请点击this链接获取更多信息。

Answer 6

由于安全问题，Laravel默认限制跨源请求。我们需要创建一个Cors中间件来接受来自不同来源的请求。

第1步：创建Cors中间件。

php artisan make:middleware Cors

第2步：返回前，在handle函数中添加以下行。

//header('Access-Control-Allow-Origin:  *');
header('Access-Control-Allow-Origin:  http://localhost:4200');
header('Access-Control-Allow-Headers:  Content-Type, X-Auth-Token, Authorization, Origin');
header('Access-Control-Allow-Methods:  POST, PUT');

第3步：在app / Http / Kernel.php文件中注册中间件。

Add below line in $middleware array 

\App\Http\Middleware\Cors::class,

步骤4：现在我们必须在app / Http / Kernel.php文件中调用中间件

Add below line in $routeMiddleware array 

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

Answer 7

您实际需要的是将代理添加到您的应用程序中（前面）

{
    "/api/*": {
      "target": "http://localhost:8000",
      "secure": false,
      "logLevel": "debug"
    }
  }

和package.json

"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}, 
...

并按此开始您的项目

npm start

链接：https://www.youtube.com/watch?v=OjmZPPKaj6A

Answer 8

好的，这是我的尝试。如果我使用错误的令牌发布到受保护的api，护照返回401，带有{“ message”：“未经身份验证”。}

但是由于响应中不存在cors标头，因此我的Vue应用程序出现CORS错误，无法处理响应代码。

因此在http：//kernel.php $ middlewarePriority上的laravel 5.8中在\ App \ Http \ Middleware \ Authenticate :: class之前添加\ Barryvdh \ Cors \ HandleCors :: class

这是我的代码：

protected $middlewareGroups = [
    'web' => [
        \App\Http\Middleware\EncryptCookies::class,
        \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
        \Illuminate\Session\Middleware\StartSession::class,
        // \Illuminate\Session\Middleware\AuthenticateSession::class,
        \Illuminate\View\Middleware\ShareErrorsFromSession::class,
        \App\Http\Middleware\VerifyCsrfToken::class,
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
    ],

    'api' => [
        'throttle:300,1',
        'Localization',
        'bindings',
        'cors'
    ],
];

protected $routeMiddleware = [
    'auth' => \App\Http\Middleware\Authenticate::class,
    'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
    'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
    'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
    'can' => \Illuminate\Auth\Middleware\Authorize::class,
    'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
    'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
    'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
    'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,

    // Add Localization MiddleWare
    'Localization' => \App\Http\Middleware\localization::class,
    'cors' => \Barryvdh\Cors\HandleCors::class,
];

protected $middlewarePriority = [
    \Illuminate\Session\Middleware\StartSession::class,
    \Illuminate\View\Middleware\ShareErrorsFromSession::class,

    //add to handle cors before authenticate
    \Barryvdh\Cors\HandleCors::class,

    \App\Http\Middleware\Authenticate::class,
    \Illuminate\Session\Middleware\AuthenticateSession::class,
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
    \Illuminate\Auth\Middleware\Authorize::class,
];

希望这对其他人有帮助

Answer 9

当我遇到“预检请求未通过访问控制检查：否'Access-Control-Allow-Origin”时，我在复合项目前端Reactjs和Laravel后端工作。 我通过清除Heroku上已部署的Reactjs应用程序的缓存解决了该问题。

How do I clear the build cache?

Answer 10

除了接受的答案中提到的步骤外，我还想添加一些我必须要做的事情。

即使在按此处所述设置HandleCors之后，在两次生产部署（Nginx上的Laravel版本^ 7.0）后，我也确实遇到了CORS错误。在我运行php artisan config:cache，composer install和composer dump-autoload之后，它开始工作。

希望这可以帮助那些尝试调试在部署过程中未更新任何配置文件时出了错的人。

Answer 11

对我来说，此问题已通过在我的laravel应用中安装laravel护照得以解决。

No＆＃39; Access-Control-Allow-Origin＆＃39;标题 - Laravel 5.4

11 个答案: