I\'m trying to access a REST service I don\'t control. First problem is that the service doesn\'t include a Access-Control-Allow-Origin header, which is a problem that, if I und
I think your answer is here. According to the wiki, A JSONP call is executed through injection of a tag to load the script from the host server, which responds by calling your callback, passing the data. A
tag generates a regular browser request (not an
XmlHttpRequest
), and the browser will send its own Accept header (it also sends its own User-Agent header, for example).
I would hope there is an easier client-side way to do this, but I think the only way may be the one suggested in the referenced post:
So, if you want to be able to set request headers for cross domain calls you will have to setup a server side script on your domain that will delegate the call to the remote domain (and set the respective headers) and then send the AJAX request to your script.
EDIT: here is a (rejected) jQuery bug report about this same problem.
Some more background info:
In angular, callbacks are managed automagically, so if your say this:
$http({
method: "JSONP",
url: "http://headers.jsontest.com?callback=JSON_CALLBACK",
}).success(function(data) {
console.log('Return value:');
console.log(data);
}).error(function(data) {
console.log('Error!');
console.log(data);
})
a tag will be created that looks more or less like this:
The content of the response to http://headers.jsontest.com/?callback=angular.callbacks._1
will be:
angular.callbacks._1({key1: "value1", key2: "value2"});
angular.callbacks._1
will contain your success
function, and it will be called with the data.