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

Posted 2023-03-04

【中文标题】Laravel API 和 Ionic 2 客户端：CORS 没有“Access-Control-Allow-Origin”标头

【英文标题】：Laravel API and Ionic 2 Client: CORS No 'Access-Control-Allow-Origin' header

【发布时间】：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 应用程序，我不能要求用户安装它...

【参考方案1】：

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

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

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

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

【讨论】：

您好，感谢您的回答。我将 CORS 中间件放在路由和组上，只是为了尝试，以确保中间件是“活动的”......我会检查我的代码以找到错误，谢谢 :)

您对中间件的看法是正确的！我的脚本中有一个错误......但是我现在遇到了“预检请求”的另一个问题......：/