title: JsonP returning "Uncaught SyntaxError: Unexpected token :" AngularJS - routingnumbers.info
body: <p>I've researched this question a ridiculous amount and would hope that someone can help diagnose what is wrong.</p>
  
  <p><b>I've already tried looked at the following SO questions:</b> (SO wouldn't let me post more than 2 links due to reputation, so i've just included the paths)</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/16344933/angularjs-jsonp-not-working/16352746#16352746">questions/16344933/angularjs-jsonp-not-working/16352746#16352746</a></li>
  <li><a href="https://stackoverflow.com/questions/19269153/jsonp-request-in-angularjs-doesnt-work-like-in-jquery">questions/19269153/jsonp-request-in-angularjs-doesnt-work-like-in-jquery</a></li>
  <li><a href="https://stackoverflow.com/questions/19669044/angularjs-getting-syntax-error-in-returned-json-from-http-jsonp">questions/19669044/angularjs-getting-syntax-error-in-returned-json-from-http-jsonp</a></li>
  </ol>
  
  <p>Among many others......</p>
  
  <p><b>Things I have tried:</b>
  I've added <i>&amp;callback=JSON_CALLBACK</i> to the end of the url. I've changed config settings such as <i>responseType: 'JSON'</i>. I've also rearranged the http.jsonp request multiple times to make sure it was not something programmatic/textual (<i>http({}) &amp; http.jsonp</i>)</p>
  
  <p><b>Here is what i'm trying to do:</b>
  Grab information from <b><i>routingnumbers.info/api/</i></b> 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.</p>
  
  <p><b>Here is the corresponding test fiddle:</b> <a href="http://jsfiddle.net/dqcpa/14/" rel="nofollow noreferrer">http://jsfiddle.net/dqcpa/14/</a></p>
  
  <p><b>As you can see, I receive two errors:</b></p>
  
  <ol>
  <li>Resource interpreted as Script but transferred with MIME type text/plain: "<a href="https://routingnumbers.herokuapp.com/api/data.json?rn=071000013&amp;callback=angular.callbacks._0" rel="nofollow noreferrer">https://routingnumbers.herokuapp.com/api/data.json?rn=071000013&amp;callback=angular.callbacks._0</a>". angular.min.js:97</li>
  <li>Uncaught SyntaxError: Unexpected token : </li>
  </ol>
  
  <p><b>But if you check the response in chrome devtools - NETWORK, it is correct: </b>Though I do know that jsonp will return the response inside of jsonpfunction({ "MyJson": "Data"}) which is where it is getting hung up at.</p>
  
  <p>Here is the original code:</p>
  
  <pre><code>//$scope.number = '071000013';
  var routingApiUrl = 'https://routingnumbers.herokuapp.com/api/data.json?rn=' + $scope.number;
  $http({
      method: 'jsonp',
      url: routingApiUrl + '&amp;callback=JSON_CALLBACK',
      responseType: "json"
  }).
  success(function(data){
      console.log('Success: ' + data);
  }).
  error(function(data){
      console.log('Error: ' + data);
  });
  </code></pre>
  
  <p>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</p>
  
  <p><b>TL:DR</b> - 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?</p>
  
  <p>Any help would be awesome!</p>
  
  <p><b>EDIT:</b> Some punctuation and stuff.</p>