Why does my API call work in chrome but not in my code?

Question

I'm trying to call the Binance API to get the LTC price in BTC and I tested the link on my browser "https://api.binance.com/api/v1/ticker/price?symbol=LTCBTC" How do i get the json file from that link into my javascript file?

$(document).ready(function() {

var url = 'https://api.binance.com/api/v1/ticker/price?symbol=LTCBTC';

$.ajax( {
    url: url,
    dataType: 'jsonp',
    type: 'GET',
    success: function(data) {
            console.log(data); //returns nothing
        }
});

})

in my browser `jsonp` complains `blocked due to MIME type (“application/json”) mismatch`, and `json` complains `CORS` — 1565986223, Apr 20 '19 at 19:34

score 4 · Accepted Answer · answered Apr 20 '19 at 20:19

As mentioned in other answer, there is CORS issue. So you can try with proxyURL from client side as below,

$(document).ready(function() {

var url = 'https://api.binance.com/api/v1/ticker/price?symbol=LTCBTC';

const proxyURL = "https://cors-anywhere.herokuapp.com/";
$.getJSON(proxyURL + url, function(playerData) {
  console.log(playerData);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Hope it helps.

Wayne · Answer 2 · 2019-04-20T21:22:08.377

The request to https://api.binance.com/api/v1/ticker/price?symbol=LTCBTC provides json data this uses CORS policy

{"symbol":"LTCBTC","price":"0.01520100"}

JSONP would look like

myCallback({"symbol":"LTCBTC","price":"0.01520100"})

This looks like and works like a Javascript / PHP function.

The URL for a jsonp includes a callback in the URL ... https://api.binance.com/api/v1/ticker/price?symbol=LTCBTC&callback=myCallback

But is not supported on this site

{"code":-1101,"msg":"Too many parameters; expected '1' and received '2'."}

It might be openable with php on your site? I can not test from the system I'm on I don't have socket transport "ssl" setup on my tablet to test.

Yes it works from a PHP wrapper.

myJSONP(<?php echo file_get_contents('https://api.binance.com/api/v1/ticker/price?symbol=LTCBTC');?>);

score 0 · Answer 3 · answered Apr 20 '19 at 19:35

If you check on console after change dataType: 'jsonp' to dataType: 'json', you will get the following as your code and their script not on same host and they need to enable Access-Control-Allow-Origin to access from other domain. You may use cur if you use php.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.binance.com/api/v1/ticker/price?symbol=LTCBTC. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

https://stackoverflow.com/questions/31276220/cors-header-access-control-allow-origin-missing here is post about that. — Obaidul Kader, Apr 20 '19 at 19:35

prakash r · Answer 4 · 2019-04-20T19:51:03.053

While performing the request from your browser or postman or fiddler you will get the result

But while performing a request from the application you will be failed with error message

Access to XMLHttpRequest at 'https://api.binance.com/api/v1/ticker/price?symbol=LTCBTC' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The issue has to be fixed from your server side end.

Please refer

Cors understanding

Also, find the solution to the problem if you're using C# .Net as your backend

Solution for cors

Why does my API call work in chrome but not in my code?

4 Answers4