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
Related
I am builiding hybrid app with angularjs and i am trying to call the service from external source. but when i make a call to url i am getting error
XMLHttpRequest cannot load https:XXXX/xxx.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
here is my code
app.controller('overview', function($scope, $http) {
$http({
method : "GET",
url : "https://ysaf.XXXX.yourcxxxxx/resource.json"
}).then(function appSucces(response) {
$scope.resources = response.data;
}, function appError(response) {
$scope.resources = response.statusText;
});
});
if i call the local .json file i am not getting any error but, only when i call the external api, i am getting this error.
is there anything i am doing wrong in this code?
Access-Control-Allow-Origin is set on the response from server, this is not on client request to allow clients from different origins to have access to the response.
In this case, https://ysaf.XXXX.yourcxxxxx/resource.json does not allow your origin to have access to the response. Therefore you cannot read it.
Add the neccessary headers such as Access-Control-Allow-Origin: *.
The issue which you are facing is CORS issue. CORS - Cross Origin Resource Sharing.
CORS issue will occur on following cases
1) If we are abc.com and accessing xyz.com (different domain)
2) If we are in http://localhost:8080/myapplication and accessing http://localhost:9080/anotherapplication (different ports)
You should download this extension for your development :
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
It will solve all Access-Control-Allow-Originproblems :)
Don't forget to disable it when you stop dev, it could be a problem for web navigation.
I am working on SPA MEAN app, I was developing it against Apiary mock APIs, which has the following CORS headers set:
Access-Control-Allow-Methods → OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECT
Access-Control-Allow-Origin → *
Access-Control-Max-Age → 10
It all works fine and angular can access it using $http angular service just fine. However after adding Stormpath Angular SDK all these requests fail with following error:
XMLHttpRequest cannot load https://xxx.apiary-mock.com/workshops?type=favourite. Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'http://localhost:8000' is therefore not allowed access.
I am trying to get to figure out why these requests are rejected and at what point these headers are added?
Thank you for finding this issue. The Stormpath Angular SDK does have an interceptor which sets the withCredentials: true flag for all requests. Please see the code here.
The intention is to ensure that our authentication cookies are always sent, even in a cross-domain situation. But I can see how this will be problematic if your Angular application is talking to other APIs that don't require cookies to be sent.
As a workaround, you can override our interceptor by simply adding another one:
angular.module('myapp', [
'stormpath',
'stormpath.templates'
]).config(function ($httpProvider) {
$httpProvider.interceptors.push(function() {
return {
request: function(config) {
config.withCredentials=false;
return config;
}
};
});
});
I've created an issue to discuss a better solution: https://github.com/stormpath/stormpath-sdk-angularjs/issues/72
Any time you have a SPA client served from one domain (e.g. localhost:8080) and you want that client to access an API on another domain (xxx.apiary-mock.com), the browser requires that the server domain add CORS headers correctly.
If the client and server domains are different, the browser's security model requires the server to indicate which client domains may access the server by setting the Access-Control-Allow-Origin response header (in addition to other relevant Access-Control-* headers).
I have how to work around it add these headers to apiary:
+ Response 200 (application/json)
+ Headers
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECT
Access-Control-Allow-Origin: http://localhost:8000
I am still trying to figure out where does Stormpath make those headers required though.
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.
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.
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