HttpClient Angular CORS Twilio答案

【问题标题】：HttpClient Angular CORS TwilioHttpClient Angular CORS Twilio
【发布时间】：2019-01-07 11:15:25
【问题描述】：

我正在尝试使用 HttpClient module

向 Twilio API 发出“GET”请求

import { HttpClient } from '@angular/common/http';

我正在使用

Angular CLI: 6.0.8
Node: 8.11.3
OS: darwin x64

我正在使用 Firefox 和 Chrome 进行测试，得到同样的错误

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api.authy.com/protected/json/phones/verification/check?api_key=****. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

这是我正在运行以测试的功能

    submitCode() {
    let data = {
        api_key: '',
        verification_code: '',
        phone_number: '',
        country_code:''
    }
    let headers = {
        'Access-Control-Allow-Origin' : '*',
        'Content-Type' : 'application/json',
    }
    this.HTTP.get('http://api.authy.com/protected/json/phones/verification/check',{params: data,headers:headers}).subscribe(
        resp=>{alert(1)},
        err=>{alert(2)},
        ()=>{alert(3)}
    )
}

触发第二个警报会发生什么？

我尝试在没有标题的情况下使用它，同样的问题。但是，当我将标头留空时，API 会被触发，并由 Twilio 监视器显示，但由于 CORS 没有返回数据。

【问题讨论】：

Cors 问题与 HTTP 插件有关，因此如果您想使用设备或模拟器对其进行测试，则无法通过 'ionc serve' 对其进行测试。

标签： angular ionic-framework cors twilio authy

【解决方案1】：

通过部署后端服务器并向其发送请求解决了这个问题。

（比从实际客户端发送并在请求中显示您的 API 密钥更好）

其他解决方案是使用CORS-Anywhere http://cors-anywhere.herokuapp.com/

【讨论】：

我们如何在 Angular 中使用