Laravel API 和 Ionic 2 客户端：CORS 没有“Access-Control-Allow-Origin”标头答案

【问题标题】：Laravel API and Ionic 2 Client: CORS No 'Access-Control-Allow-Origin' headerLaravel API 和 Ionic 2 客户端：CORS 没有“Access-Control-Allow-Origin”标头
【发布时间】：2018-02-07 12:48:40
【问题描述】：

我使用 Laravel 创建了一个 API，并尝试将它与 Ionic 2 项目一起使用

我正在尝试向我的 Laravel API 发出 GET 请求。

当我提出http 请求时

auth/{prodiver}/callback/{userID}/{accessToken}

我收到了这个错误：

Failed to load http://api.url.net/api/auth/facebook/callback/XXXX/MY_TOKEN: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8001' is therefore not allowed access.

我的路线是这样的：

Route::group(['middleware' => ['guest', 'cors']], function() {
    Route::get('test', function () {
        return response()->json('{dummy.data}', 200);
    });

    Route::get('auth/{prodiver}/callback/{userID}/{accessToken}', 'SocialAuthController@callback')->middleware('cors')->name('social.auth'); // social auth
});

但是当我尝试使用路由test 的相同代码时，它可以工作并且我得到了数据...

“facebook connect”不是问题，触发了成功回调。

这里是callback() 方法

public function callback($provider, $userID, $accessToken)
{
    if ($provider == "facebook"){
        $user = $this->createOrGetUser($userID, $accessToken);
        auth()->login($user);
        return response()->json($user, 200);
    }
}

所有其他 http 请求都可以正常工作...

这里是关注的http 请求（在 Ionic 项目中）

let headers = new Headers(); 
headers.append('Content-Type', 'application/json'); 
let url = this.baseApiUrl+'auth/facebook/callback/' + userID + '/' + accessToken; 
this.http
    .get(url, {headers: headers})
    .map(res => res.json())
    .subscribe(data => {
            console.log(data)
        }, err => {
            this.onError(err);
        }
    );

我不明白发生了什么，有人有线索吗？我完全厌倦了这个错误：/

非常感谢！ :)

【问题讨论】：

您提到了cors 中间件。你用什么包，barryvdh/laravel-cors？你配置好了吗？
是的，我让配置到处都是“*”，用于开发...
No 'Access-Control-Allow-Origin' header - Laravel 5.4的可能重复
你可以试试浏览器插件跨域资源共享(CORS)。我也面临这个问题 ionic + laravel 5.2。这对我有用。
是的，我可以通过一个CORS浏览器插件，但这不是有点愚蠢吗？这是一个 Ionic 应用程序，我不能要求用户安装它...

标签： php laravel angular ionic2 cors

【解决方案1】：

首先，为什么在定义第二条路由的时候要设置cors中间件呢？已经为整个组设置好了。

其次，cors 返回一个 cors 错误，以防您的代码出现错误，这就是它的行为。

发生错误时，中间件未完全运行。所以当发生这种情况，您不会看到实际结果，但会得到一个 CORS 而是错误。

尝试调试您的代码以查找错误。测试返回数据，说明这不是报错的cors，是你的代码。

【讨论】：

您好，感谢您的回答。我将 CORS 中间件放在路由和组上，只是为了尝试，以确保中间件是“活动的”......我会检查我的代码以找到错误，谢谢 :)
您对中间件的看法是正确的！我的脚本中有一个错误......但是我现在遇到了“预检请求”的另一个问题......：/