JSONP Unexpected Syntax Error (API doesn't support JSONP)

Question

My function:

function getMarketData_() {
      $http({
        method: 'JSONP',
        url: 'https://api.coinmarketcap.com/v2/ticker/',
      }).then(function(response) {
        console.log('ran');
      }).catch(function(response) {
        console.log('Error');
      });
    }

The Error:

Uncaught SyntaxError: Unexpected token :

The location of the error in the returned JSON:

Can we see the full json? Is data supposed to be an array by any chance? — Lex
– Lex, Commented Jun 15, 2018 at 20:25
@KevinB JSONP is an acronym for JSON Padded. See Wikipedia - JSONP — georgeawg
– georgeawg, Commented Jun 15, 2018 at 22:07

georgeawg · Accepted Answer · 2018-06-15 22:45:26Z

0

The API doesn't support JSONP.

To test click: https://api.coinmarketcap.com/v2/ticker/?callback=test

An API that supports JSONP would send back something like:

test({
    "data": {
        "1": {
            "id": 1, 
            "name": "Bitcoin", 
            "symbol": "BTC", 
            "website_slug": "bitcoin", 
            "rank": 1, 
            "circulating_supply": 17095362.0, 
            "total_supply": 17095362.0, 
            "max_supply": 21000000.0, 
            "quotes": {
                "USD": {
                    "price": 6530.3, 
                    "volume_24h": 4015800000.0, 
                    "market_cap": 111637842469.0, 
                    "percent_change_1h": -0.66, 
                    "percent_change_24h": -2.31, 
                    "percent_change_7d": -14.6
                }
            }, 
            "last_updated": 1529097276
        }
    }
})

For more information, see Wikipedia - JSONP

See also Angular 1.6.3 is not allowing a JSONP request that was allowed in 1.5.8

The API supports CORS.

To test use:

https://www.test-cors.org/#?client_method=GET&client_credentials=false&server_url=https%3A%2F%2Fapi.coinmarketcap.com%2Fv2%2Fticker%2F&server_enable=true&server_status=200&server_credentials=false&server_tabs=remote

This question typically arises when a user attempts to use $http.get and gets:

XMLHttpRequest cannot load https://www.[website].com/ No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4300' is therefore not allowed access.

Then someone suggests $http.jsonp as the workaround. This only works if the API supports JSONP.

For more information, see

edited Jun 15, 2018 at 22:45

answered Jun 15, 2018 at 21:28

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Joe Berthelot Over a year ago

The API has a method to structure the data as an array, do you think this could be a workaround? api.coinmarketcap.com/v2/ticker/…

georgeawg Over a year ago

The array structure is nice but it still is not JSONP because the required padding is not added. If the API doesn't support JSONP there is no workaround that will make $http.jsonp work. Use $http.get from an https origin or use a CORS proxy.

Joe Berthelot Over a year ago

Yeah that's what I figured. Thanks for the insight. I've been also trying to use $http.get but with that method I just get the CORS error: "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.". Note that I'm running this from localhost. When I run the exact same code from a site like Codepen, it works fine.

georgeawg Over a year ago

Codepen works because their origin is https. Your localhost doesn't work because the origin is http. Modern browsers block http to https cross origin requests.

Collectives™ on Stack Overflow

JSONP Unexpected Syntax Error (API doesn't support JSONP)

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related