CORS Laravel VueJS

Question

我正在尝试使用 axios 从 VueJS 到 Laravel（这是我的 API）。

我收到这个错误：

从原点>“ http://localhost:8080 ”访问“http: //api.test/api/events/1/ ”处的 XMLHttpRequest已被 CORS 策略阻止：无“Access-Control->Allow-Origin”标头存在于所请求的资源上。

未捕获（承诺中）错误：XMLHttpRequest.handleError (xhr.js?b50d:87) 处 createError (createError.js?2d83:16) 处出现网络错误

我尝试创建一个名为“cors”的中间件，如下所示，但它对我不起作用，或者也许我做得很糟糕？

奇怪的事情 ？是与 Postman 合作的。

感谢您的帮助！:)

Answer 1

服务器用于托管网页、应用程序、图像、字体等。当您使用网络浏览器时，您可能会尝试访问不同的网站（托管在服务器上）。网站通常从 Internet 上的不同位置（服务器）请求这些托管资源。服务器上的安全策略可以减轻与请求托管在不同服务器上的资产相关的风险。我们来看一个安全策略的例子：同源。

同源策略的限制非常严格。在此策略下，服务器 A 上托管的文档（即网页）只能与服务器 A 上的其他文档进行交互。简而言之，同源策略强制相互交互的文档具有相同的属性。起源。

检查这个专为 Laravel 使用而设计的CORS库。安装很简单：

$ composer require barryvdh/laravel-cors
$ php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

默认值设置在config/cors.php

return [
     /*
     |--------------------------------------------------------------------------
     | Laravel CORS
     |--------------------------------------------------------------------------
     |
     | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
     | to accept any value.
     |
     */
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['Content-Type', 'X-Requested-With'],
    'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
    'exposedHeaders' => [],
    'maxAge' => 0,
];

allowedOrigins, allowedHeaders并且allowedMethods可以设置为array('*')接受任何值。

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

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

如果您想在特定中间件组或路由上允许 CORS，请将 HandleCors 中间件添加到您的组中：

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

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

https://www.codecademy.com/articles/what-is-cors