CORS Laravel VueJS答案

【问题标题】：CORS Laravel VueJSCORS Laravel VueJS
【发布时间】：2019-06-10 15:22:35
【问题描述】：

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

我收到了这个错误：

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

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

我尝试创建一个名为“cors”的中间件，例如 here，但它对我不起作用，或者我做得不好？

奇怪的东西？是和 Postman 合作吗？

感谢您的帮助！ :)

【问题讨论】：

你试过第二个答案了吗？ stackoverflow.com/a/40199615/1308765
我没有任何名为 routes.php 的文件，但我已经尝试过 api\vendor\symfony\routing\Route.php 和 \api\routes\api.php，我在做弄错了吗？
@J.Doe 从不编辑 vendor 中的任何内容。 api/routes/api.php 是要编辑的文件 - Laravel 曾经在 routes.php 中包含所有路由，但它没有分成 Web 和 API 版本。
你在用vue-cli吗？

标签： laravel vue.js cors axios

【解决方案1】：

服务器用于托管网页、应用程序、图像、字体和多得多。当您使用网络浏览器时，您可能会尝试访问不同的网站（托管在服务器上）。网站经常要求这些来自不同位置（服务器）的托管资源互联网。服务器上的安全策略减轻了相关的风险请求托管在不同服务器上的资产。让我们来看看以安全策略为例：同源。

同源政策非常严格。根据这项政策，一个托管在服务器 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，请在 app/Http/Kernel.php 类的 $middleware 属性中添加 HandleCors 中间件：

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

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

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

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

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

【讨论】：

嗨，我试过了，但还是不行……如果能帮助找到答案，我正在使用 Laragon 作为本地服务器（所以它是 Apache 服务器）
嗨，J.Doe，我找到了这篇文章……你是怎么解决这个问题的？

【解决方案2】：

您面临的问题是同源策略。您可以在 Mozilla 网站 (https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control) 上了解它。它基本上是为了证明未经授权访问网络服务器。你可以改变你的网络服务器的反应方式，我也在我包含的那个链接中。

【讨论】：