HttpClient Angular CORS Twilio

问题

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

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

I'm Using

Angular CLI: 6.0.8
Node: 8.11.3
OS: darwin x64

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).

This is the function I'm running to test

    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)}
    )
}

What happens is that the second alert triggers ?

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.

回答1:

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

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

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

来源：https://stackoverflow.com/questions/51606925/httpclient-angular-cors-twilio