Chrome 的跨域读取阻塞 (CORB) 阻止了跨域响应的离子答案

【问题标题】：Chrome' Cross-Origin Read Blocking (CORB) blocked cross-origin response' ionicChrome 的跨域读取阻塞 (CORB) 阻止了跨域响应的离子
【发布时间】：2019-02-21 16:31:49
【问题描述】：

我正在尝试对用户进行身份验证，但由于 跨域读取阻止 (CORB) 被阻止发出我的 login.ts 代码是

if (this.plugins.isOnline()) {
            if (this.wait == true) {
                return;
            } else if (this.userLogin.email == '' || this.userLogin.password == '') {
                this.utility.doToast("Please don't leave any field blank.");
                return;
            } else {
                this.wait = true;
                this.auth.login(this.userLogin).subscribe((success) => {
                    this.wait = false;
                    console.log(success.successData);
                    this.credential.setUser(success.successData);
                    this.plugins.sendTags(success.successData.id)
                    this.rememberUsertype(success.successData.is_celebrity);
                    if(success.successData.is_celebrity == '0'){
                    this.app.getRootNav().setRoot("HomePage");
                    }
                    else if(success.successData.is_celebrity == '1'){
                    this.app.getRootNav().setRoot("DashboardPage");
                     }

                    }, (error) => {
                        console.log(error);
                    this.wait = false;
                    if (this.utility.timeOutResponse(error))
                        this.utility.doToast("The email or password you entered is incorrect.")
                })
            }
        } else {
            this.utility.doToast(this.utility.internetConnectionMessage());
        }

this.auth.login 函数

login(params) {
        console.log(params);
        var url = this.constants.API_ENDPOINT + 'login';
        var response = this.http.post(url, params, {}).map(res => res.json());
        return response;
    }

【问题讨论】：

标签： angular ionic-framework ionic2 ionic3

【解决方案1】：

允许控制允许来源：允许您从任何来源请求任何带有 ajax 的站点。添加到响应 'Allow-Control-Allow-Origin: *' 标头

在浏览器中添加此扩展程序：Allow-Control-Allow-Origin

【讨论】：

【解决方案2】：

您需要在 API 响应中添加一些 CORS 标头。

我的后端是 PHP 的，所以我只是添加了这个字符串：

    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
    header('Access-Control-Allow-Headers: Content-Type');

【讨论】：

【解决方案3】：

你可以做几件事。一种是将 CORS 策略添加到您的登录后端。如果您使用 Node 作为后端，则有一个名为 cors 的 npm 包可以解决问题。如果没有，应该有一种简单的方法可以在您使用的语言/框架中添加策略。如果您通过 Firebase 或 Auth0 等服务提供商进行身份验证，您可以将您的 URL（本地主机或其他任何内容）添加到他们的设置中，这样就可以解决问题。

您可以做的另一件事是向您的浏览器添加一个扩展程序，以便它为您发送 cors 预检请求。我有一个与 Chrome 一起使用的，它的名字叫CORS。它工作得很好，但要小心。我只在 localhost 上开发时才使用它，所以为了安全起见，我将其配置为仅在 URL 为 localhost 时添加预检请求。

您最终可能需要的是这两种方法的结合。

【讨论】：