HttpClient Angular CORS Twilio [英] HttpClient Angular CORS Twilio

问题描述

我正在尝试使用 HttpClient module

I'm trying to do a "GET" request to Twilio API using HttpClient module

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

我正在使用

Angular CLI: 6.0.8
Node: 8.11.3
OS: darwin x64

我正在使用Firefox和Chrome浏览器进行测试，出现相同的错误

I'm testing using Firefox and Chrome, getting the same error

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而没有返回任何数据.

I tried using it without headers, same issue. However, when I leave headers empty, the API gets triggered, and it shows by Twilio monitors, but no data returned because of CORS.

推荐答案

通过部署后端服务器并向其发送请求来解决此问题.

Solved this issue by deploying a backend server and sending requests to that.

(比从实际客户端发送并在请求中显示API密钥要好)

(Better than sending from the actual client and displaying your API Key in your requests)

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

Other solution is to use CORS-Anywhere http://cors-anywhere.herokuapp.com/

这篇关于HttpClient Angular CORS Twilio的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！