How can we perform cross site ajax request from angular js? I have tried doing in this way:
$http.post('http://cross.local', data)
But the browser is throwing an error:
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin is therefore not allowed access.
So i added the headers
Access-Control-Allow-Credentials:true
Access-Control-Allow-Methods:GET,POST,DELETE,OPTIONS
Access-Control-Allow-Origin:*
But I'm still getting the same error.
Where did I go wrong?
You need to enable the CORS support in Angular, which is off by default
yourApp.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);
The first line enables the CORS support, the second removes the header that typically is send with Ajax requests.
If you do not want this behavior everywhere in your app, you need to fine tune where to set the defaults.
In the server i forget to add the handler for POST request, So for each post request 'No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access.' error is thrown by the server. When i added the POST handler it worked
Related
XMLHttpRequest cannot load http://hfdvcbapp01.vm.itg.corp.us.shldcorp.com:8180/cnb/cnb/report/summary?Company=IT. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:64033' is therefore not allowed access.
I am getting this error when i am trying to load data from json which situated at the server.How can i resolve this.
Access-Control-Allow-Origin header should be set in the response,
if it is not from the same origin of the URL it was sent from, the header should be set from the respone - meaning - the server responding to the request in youre case - http://hfdvcbapp01.vm.itg.corp.us.shldcorp.com:8180,
if the server is under youre control just handle it, if its an outside service you should request this.
Your api is not returning header
Access-Control-Allow-Origin: http://yourdomain.com
to allow specific domain
or
Access-Control-Allow-Origin: *
to allow all
PS. Also make sure that headers are actually there. Pay attention that CORS actually send 2 requests 1 will be OPTIONS, second will be actual request so if you return headers only on GET or POST it wont work. To check it in chrome presss f12, go to network and do you requests make sure that header is there
Read more
I am trying to create a search application in angularjs.However, i am getting the below error . Can someone please help.
AddrBook.html:1 XMLHttpRequest cannot load http://121.242.159.36:6006/AddressBookWS/rest/addressBookService/getCompany/%20%20%20%20%20%20%20%20%20%20JB. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Thanks
Srikala
(1)
No 'Access-Control-Allow-Origin' header is present on the requested resource.
You are making a cross domain request and this header must be present on the server's response.
The header should be ...
Access-Control-Allow-Origin: *
To allow any domain to make a request to the server.
This is your problem! If you have control over the server then add the response header. If not then make the request at your backend to circumvent the X-domain policy and then make the data available to your angular app.
...
(2)
Origin 'null' is therefore not allowed access -- This is because you are not setting the Origin header in your HTTP request
You can set default headers for all http requests in your app config.
Although (2) will not fix the issue just an FYI.
While I try to access wiki api using Angularjs $http.get(), CORS issues occured. Here is my code
$http.get('http://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exintro=&titles=India')
.success(function(data){
console.log('data' +data);
});
And this is the error message
XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exintro=&titles=India. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Use JSONP for cross-site requests.
Check the following SO answer regarding CORS:
CORS, Cordova, AngularJs $http and file:// confusion
As well as the mentioned in the comment:
http://www.html5rocks.com/en/tutorials/cors/
See Manual:CORS and API:Cross-site requests. Specifically, you need to set $wgCrossSiteAJAXdomains and add an origin parameter to your request.
Following Restangular's documentation and includes an example of this:
// GET to http://www.google.com/ You set the URL in this case
Restangular.allUrl('googlers', 'http://www.google.com/').getList();
I am trying to do the same for angel.co
$scope.trial = Restangular.allUrl('googlers', 'https://api.angel.co/1/users/267770').getList();
And keep getting error
XMLHttpRequest cannot load https://api.angel.co/1/users/267770. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.
Any solutions?
The server (api.angel.co) is not responding with Access-Control headers which results in this error.
When sending XHR requests to domains different from the origin domain web browsers are checking if the service allows this. In your case api.angel.co would need to include the header Access-Control-Allow-Origin: * as part of the response (which it does not).
Assuming you cannot change api.angel.co, an alternative would be to build a server-side proxy (e.g. in node.js) which allows Cross-Origin Resource Sharing.
Check out this great article about Cross-Origin Resource Sharing (CORS).
I try to access a different domain site that way:
http://jsfiddle.net/carolineBda/2uZnP/
I always get (error visible in the console):
XMLHttpRequest cannot load http://www.google.fr.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://fiddle.jshell.net' is therefore not allowed access.
I've configured the httpProvider like that:
app.config(['$httpProvider',function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
Any ideas what I'm missing?
Thanks for your help.
The service you are requesting is not allowing CORS (no Access-Control are sent as part of the response). So the web browser is not allowing it. This is the expected behavior and not an Angular issue.
Also check this