Binance API and angular 4 httpClient

Question

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

There is not enough detail here to begin to guess. Consider using an asynchronous technique that correspond well to HTTP requests (i.e. **not** RxJS). — Aluan Haddad, Jan 11 '18 at 08:55
RxJS is useful when you have a stream of zero or more results. With an HTTP request, you always have _one_ result. It is awkward and error prone and throws away the [language level facilities](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) that are available. — Aluan Haddad, Jan 11 '18 at 09:26

jay · Answer 1 · 2018-01-21T01:47:26.063

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

score 1 · Answer 2 · answered Jan 11 '18 at 08:57

1

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

answered Jan 11 '18 at 08:57

Léo R.

2,620
1
10
22

It doesn't work for me. Could try console.log(this.results) ? Does it work? – Adam Adamski Jan 11 '18 at 09:11

score 0 · Answer 3 · answered Jan 11 '18 at 08:58

0

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:'*')
    })

answered Jan 11 '18 at 08:58

Eliseo

50,109
4
29
67

Still in browser I have error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.binance.com/api/v1/exchangeInfo. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). – Adam Adamski Jan 11 '18 at 09:11
@AdamAdamski you are getting a CORS error? Why didn't you include that information in your question?! Eliseo how is `set` acting immutably in your example? This doesn't make any sense. – Aluan Haddad Jan 11 '18 at 09:27
Yes, I have cors error. I forgot mention about it in question. Could you help me with that? – Adam Adamski Jan 11 '18 at 09:42

Binance API and angular 4 httpClient

3 Answers3

Linked