JsonP returning "Uncaught SyntaxError: Unexpected token :" AngularJS - routingnumbers.info

Question

I've researched this question a ridiculous amount and would hope that someone can help diagnose what is wrong.

I've already tried looked at the following SO questions: (SO wouldn't let me post more than 2 links due to reputation, so i've just included the paths)

1. questions/16344933/angularjs-jsonp-not-working/16352746#16352746
2. questions/19269153/jsonp-request-in-angularjs-doesnt-work-like-in-jquery
3. questions/19669044/angularjs-getting-syntax-error-in-returned-json-from-http-jsonp

Among many others......

Things I have tried: I've added &callback=JSON_CALLBACK to the end of the url. I've changed config settings such as responseType: 'JSON'. I've also rearranged the http.jsonp request multiple times to make sure it was not something programmatic/textual (http({}) & http.jsonp)

Here is what i'm trying to do: Grab information from routingnumbers.info/api/ using an angular jsonp request (server does not allow CORS). I am able to make the request successfully with jQuery, but i'm unable to make it successfully with angular.

Here is the corresponding test fiddle: http://jsfiddle.net/dqcpa/14/

As you can see, I receive two errors:

1. Resource interpreted as Script but transferred with MIME type text/plain: "https://routingnumbers.herokuapp.com/api/data.json?rn=071000013&callback=angular.callbacks._0". angular.min.js:97
2. Uncaught SyntaxError: Unexpected token :

But if you check the response in chrome devtools - NETWORK, it is correct: Though I do know that jsonp will return the response inside of jsonpfunction({ "MyJson": "Data"}) which is where it is getting hung up at.

Here is the original code:

//$scope.number = '071000013';
var routingApiUrl = 'https://routingnumbers.herokuapp.com/api/data.json?rn=' + $scope.number;
$http({
    method: 'jsonp',
    url: routingApiUrl + '&callback=JSON_CALLBACK',
    responseType: "json"
}).
success(function(data){
    console.log('Success: ' + data);
}).
error(function(data){
    console.log('Error: ' + data);
});

Has anyone used this API with angular? I'm assuming that there may be something I can do (sans jquery) to modify headers, but I have not been able to find any information. I'm also thinking that it could be a server issue (although, if it is working correctly in jquery, that wouldn't be the issue). Maybe this could be something with HTTPS

TL:DR - Angular JSONP request is not working, but with the same URL, the jQuery JSONP request is working. Referencing the above code, what am I missing?

Any help would be awesome!

EDIT: Some punctuation and stuff.

Nonflammable

don't you need to add ?callback= vs. &callback=? It's the question mark, not the ampersand – Underneath

There is already a ?rn= on the URL. see routingApiUrl. Using & as a continuation of the query string. – Nonflammable

Answer 1

acoording to this question: How to get rid of Uncaught SyntaxError: Unexpected token : try adding angular.callbacks._0 (JSON) around your server side json call. it worked for me

This was the plunker http://plnkr.co/edit/oX2UQRBA41FIHpwAP6AA

Typewrite

the response is not being wrapped in angular.callback._0. For jQuery, the call is being wrapped correctly. This is the correct description for my issue. – Nonflammable