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.
Related
I want to get api_kye and I use moqui framework in backend , use axios in react js project :
axios.get(SERVER_URL + '/rest/api_key', {
headers: {
Authorization: "Basic " + btoa(username + ":" + password) ,
'Content-Type' : 'application/x-www-form-urlencoded' ,
},
}).then(response => {})
then , when requested the below error happened :
Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value '...' that is not equal to the supplied origin.
This is not a reactJS error, this is a problem with your backend code, you need to look at the Moqui docs to see how you can allow the origin you are calling from to access your API
Enable CORS in the server side
Let's head back to our server's app.js file.
app.get('/cors', (req, res) => {
res.set('Access-Control-Allow-Origin', '*');
res.send({ "msg": "This has CORS enabled 🎈" })
});
Also check the redirect URL in server side
Refer this link
when ever you send an HTTP request to an API the server response should include your domain in response header otherwise chrome will raise this error: "Access to XMLhttprequest has blocked for origin ...."
so first of all make sure that your domain is included in server code.
if it's included already then the reason could be that server can't process your response correctly. maybe it crashed so the response is corrupted and chrome can't find your domain in response header and it raises that error
So i have a solution for this but you may or may not be able to build it.
CORS is a security feature, you should be receiving requests thru your backend and not the browser directly in general...
IF the data is not sensitive and you want to open an endpoint to the world without getting CORS errors you can do one of two things
Set the CORS headers from the server side. You'll need to understand HTTP requests and headers. you set these from the server. enabling cross origin with * will work.
Build a proxy. I've done this in AWS API gateway, I'll link another post. works good. basically AWS will act as your back end and take the response with CORS blocked. you will then proxy the request and strip the CORS header. When you call the api you will actually call AWS which calls the API, then AWS will pass the response back to you with CORS enabled.
Angular No 'Access-Control-Allow-Origin'
just follow these steps and it will work.
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.
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
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