Ionic + Laravel 应用程序开发中的 CORS 错误答案

【问题标题】：CORS Error in Ionic + Laravel App developementIonic + Laravel 应用程序开发中的 CORS 错误
【发布时间】：2017-11-27 00:36:01
【问题描述】：

我在 laravel 中做了一个网站。现在我正在使用 Ionic 3 制作它的移动应用程序。

我在对 laravel 后端进行 API 调用时遇到以下问题。

localhost/:1 XMLHttpRequest cannot load http://xyz.dev/request/login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

假设在 laravel 的 web.php 中定义了 12 条路由。

然后在我的 12 个项目中，6 个路由用于桌面 Web 应用程序，其余 6 个路由以 /mobile 为前缀，以便我可以在我的 API 中使用它。我在通过 IONIC 中的移动应用程序发出任何请求时遇到了这个问题，而后端在 Larave 中。

请帮帮我。

【问题讨论】：

XMLHttpRequest cannot load https://www.[website].com/的可能重复

标签： angular ionic-framework cors ionic3

【解决方案1】：

你可以在你调用api的laravel项目中添加这个

把它放在你的filters.php文件中

Route::filter('alloworigin', function()
{   
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
    header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Request-With');
    header('Access-Control-Allow-Credentials: true');
});

这样就可以成功调用跨平台api了..

或你也可以把它放在你的ajax调用中

$http({method: 'GET', url: 'http://localhost:3000/api/symbol/junk', 
            headers:{
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
                'Access-Control-Allow-Headers': 'Content-Type, X-Requested-With',
                'X-Random-Shit':'123123123'
            }})

【讨论】：