javascript - Binance API and angular 4 httpClient - Stack Overflow

admin管理员组

文章数量:1344554

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.

But using with angular 4 httpClient:

this.http.get('').subscribe(res => console.log(res));

I have error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at api.binance/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?.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 = '';
    return this.http.get(path, {headers: headers});
}

Thanks in advance

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./api/v1/exchangeInfo

But using with angular 4 httpClient:

this.http.get('https://api.binance./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./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./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./api/v1/exchangeInfo';
    return this.http.get(path, {headers: headers});
}

Thanks in advance

• javascript
• angular
• http
• typescript
• cors

Share Follow edited Jan 11, 2018 at 9:39 Adam Adamski asked Jan 11, 2018 at 8:52 Adam AdamskiAdam Adamski 76733 gold badges1111 silver badges2020 bronze badges 3

• 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 Commented Jan 11, 2018 at 8:55
• Why not RxJS? Could you explain? – Adam Adamski Commented Jan 11, 2018 at 9:21
• 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 that are available. – Aluan Haddad Commented Jan 11, 2018 at 9:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

Try this simple request without headers.

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

It work for me

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

本文标签： javascriptBinance API and angular 4 httpClientStack Overflow