I am using nodejs as backend and angularjs.
In my front end app, I neeed to read a feed at 'http://feeds.folha.uol.com.br/folha/ciencia/rss091.xml'.
I am getting an error of access-control-origin.
I don´t understand, because if I use the Postman app with this url or type right into browser no-error happens.
What am I doing wrong?
in my controller I am using:
app.controller('OpenWeatherCtrl', ['$scope','$http',
function($scope,$http) {
$http.get('http://feeds.folha.uol.com.br/folha/ciencia/rss091.xml')
.then(function(data) {
if (data && data.length >0 ) {
$scope.news = data;
}
});
But I get the next error:
XMLHttpRequest cannot load http://feeds.folha.uol.com.br/folha/ciencia/rss091.xml.
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' is therefore not allowed access.
Its because the site you are accessing enforces same origin policy, so that you can't access that particular URL from another webpage. The web server tells your browser that it doesn't allow accessing itself from your domain, localhost in this case. So browser refuses to load and fires the error. You can turn off same origin policy for your browser if you want for development purposes. But obviously you cant use it on production. If you are the owner of the website, you can allow access from localhost or any other domain you want.
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.
Why can I make a REST API request from a browser/Postman/ even Node.js (http.get method), but not from Angular resource?
The snippet of the error message is:
XMLHttpRequest cannot load http://example-of-external-api-site.com
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' is therefore not allowed access.
Before asking this, I tried to look at the definition of CORS. And from my understanding, I can understand why it disallow the request I make from Angular's resource since it is coming from a different domain. But, isn't my browser/Postman/Node.js app are from a different domain as well?
Please help me answering this, I can't really understand why..
When a request is made from the browser when accessing a url directly, you are requesting the content of a url without the use of XMLHttpRequest.
There are two scenarios for $http.get():
When accessing a uri that is NOT the same domain that is hosting your AngularJS content, via an ajax call utilizing XMLHttpRequest from within the rendered content of your browser, you must provide a CORs header that matches the whitelisting on the target server. This is due to browser security restrictions to prevent nasty, malicious attacks such as Cross Site Scripting.
When accessing a uri that IS the same domain as that which is hosting your AngularJS content (typically done via relative paths: /Api/1 instead of http://domain.com/api/1), CORs whitelisting is not required, since both the origin and the target domain are the same.
Finally, when invoking a url from node, you are making a server to server concurrent call which does not have the same security restrictions since it is not executing within your browser.
I am using Google matrix api in angularjs like below code :
var params = {origins: $scope.getrest.origin, destinations: addr, key: 'AIzaSyAfkiSErIwa6AGNYmig'};
return $http.get('https://maps.googleapis.com/maps/api/distancematrix/json', {params: params}).then(function (res) {
});
but it gives me error show in image and i also include js file and also try all solution from google but not find any proper solutions.
Error Image
Make the request to googleapis server side to avoid the X domain origin rule (e.g. if you are using Java in your backend make the request there) then your front end code can easily access that data
I try to send http request with $http (angular) with this code:
$http({
method: 'GET',
url: 'http://192.168.0.17:9000',
header: {'Access-Control-Allow-Origin': "*"},
}).then(getEventsSuccess, getEventsError);
But this doesn't work and I have in the web console this error:
XMLHttpRequest cannot load http://192.168.0.17:9000/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
Do you have a solution ?
You see this error due to a security mechanism implemented in your browser, called Same Origin Policy.
Basically, it is caused since your webpage tries to access a resource which resides on a server that is on a different Host, Port or Scheme (HTTP / HTTPS / file etc) than the webpage itself.
In order to solve this issue, you can do one of the following:
Serve your Webpage from the server that you are trying to access. If your webpage URL will be http://192.168.0.17:9000/X.html, your request should be successful and the error will disappear.
Add a special header to the response sent from your server, called Access-Control-Allow-Origin.
Read more here:
https://en.wikipedia.org/wiki/Same-origin_policy
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
trying to access an api with angularjs:
eg.
footballdataAPI.getTeams = function() {
$http.defaults.headers.common['Auth-Token'] = '613a6b6937394ae8a94d69f358f76902';
return $http.get('http://www.football-data.org/alpha/soccerseasons/398/leagueTable?callback=JSON_CALLBACK');
};
But I get the console error:
XMLHttpRequest cannot load http://www.football-data.org/alpha/soccerseasons/398/leagueTable?callback=JSON_CALLBACK. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://alexanderlloyd.info' is therefore not allowed access.
Do they need to allow requests from my domain on their side? Or is there something I can add to make this work ad they have already given me an authorisation token as shown in the code.
Thanks!
The server must send the Access-Controll-Allow-Origin header, telling the browser that requests from your application's host are allowed - otherwise the browser refuses to make such request (as a built-in security measure).
If interested, you can read a much more detailed explanation here.