Binance API and angular 4 httpClient

问题:

I have a question about cryptomarket Binance. They have public api which I though I could use in angular to create trading app.

But I have some troubles. Using that link in chrome I get json result. https://api.binance.com/api/v1/exchangeInfo

But using with angular 4 httpClient:

this.http.get('https://api.binance.com/api/v1/exchangeInfo').subscribe(res => console.log(res));

I have error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at api.binance.com/api/v1/exchangeInfo. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

It doesn't work. I don't get it, why I can't use that API in angular app?https://github.com/binance-exchange/binance-official-api-docs/blob/master/rest-api.md

What should I do? Should I set headers like that:

getMarkets() {
    const headers = new HttpHeaders();
    headers.set('Content-Type', 'application/json');
    headers.set('Accept', 'application/json');
    headers.set('Access-Control-Allow-Headers', 'Content-Type');
    headers.set('Access-Control-Allow-Origin', '*');

    const path = 'https://api.binance.com/api/v1/exchangeInfo';
    return this.http.get(path, {headers: headers});
}

Thanks in advance

回答1:

You can't quite use it directly like that, Binance API does not set CORS headers, so Chrome and all major browsers will block the requests. There is a bit more to it, but essentially, the api servers that need to enable support for CORS should set Access-Control-Allow-Origin to be * or a single domain www.example.com, this allows the browsers to prevent malicious code on a site to call and read the response of some data from other site you might be logged on to ( eg: bank info ) You can read more about it here

One possible solution is to have your own server that proxies calls to binance

Another solution if you're testing things out is to use a CORS enabling extension like this one

Update: You can also use the websocket API if that satisfies your data needs docs

Update 2: Here's a good stackoverflow question on cors

Side note: If your bank's API server sets the Access-Control-Allow-Origin to * then change banks :)

回答2:

HttpHeaders is immutable. So you must write

const headers = new HttpHeaders().
    set('Content-Type', 'application/json').
    set('Accept', 'application/json').
    set('Access-Control-Allow-Headers', 'Content-Type').
    set('Access-Control-Allow-Origin', '*');

or

const headers = new HttpHeaders(
    {
      Content-Type:'application/json'),
      Accept:'application/json'),
      Access-Control-Allow-Headers:'Content-Type'),
      Access-Control-Allow-Origin:'*')
    })

回答3:

Try this simple request without headers.

 this.http.get('https://api.binance.com/api/v1/exchangeInfo').subscribe(data => {
      this.results = data;
    });
  }

It work for me