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.
Related
I am working on Ionic framework , i am trying to access an Restful API using $http service in my Ionic framework i ma getting the following error in console.
XMLHttpRequest cannot load https://apiexample.com/token/ Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 405.
Anyone know how to access that Rest full API from my Angular Js using $http service ?
Any help will be appreciated, Thanks in advance :D
This is a setting that you need to enable on the server side. Ensure you have the right CORS settings on the server side.
I've trying to make a request to my aspnet Web Api, with angular, with the $http module inside a factory, like:
http.get('http://localhost:5000/api/todo').success(function(r){ return r; }).error(function(err){ return err; });
But I'm getting the following error:
XMLHttpRequest cannot load http://localhost:5000/api/todo. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin http://localhost:9000/ is therefore not allowed access.
I know that the request arrive to the server because I log a message when I request the resource.
I found that I had to implement CORS at the server. I added the CORS middleware and configure my Startup file, but nothing changed.
I suppose that the middleware should add the configured headers to the response, but It doesn't.
¿What is the problem in this context?
Ok, after a small research. I found that .WithOrigins("...") method is not adding the Access-Control-Allow-Origin header, I don't know if it's the context or what, I just made an issue about it. I replace it with .AllowAnyOrigin() by now.
And also added an attribute to my controller class.
[EnableCorsAttribute("AllowAll")]
Of course you need to add the namespace where EnableCorsAttribute class is.
using Microsoft.AspNet.Cors.Core;
This worked for me I hope it help you, thanks for the comments.
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
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