This question already has answers here:
How does the 'Access-Control-Allow-Origin' header work?
(19 answers)
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
(26 answers)
Closed 4 years ago.
Hi I'm new to javascript and API calls and I'm trying to make an API call using the following javascript code:
var url = 'https://labs.bible.org/api/?
passage=random&type=json&callback=myCallBackFcn';
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', url);
ourRequest.onload = function(){
console.log(ourRequest.responseText);
};
ourRequest.send();
When I refresh my page I get the following error:
Failed to load
https://labs.bible.org/api/?passage=random&type=json&callback=myCallBackFcn:
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.
Can anyone help me with this? Also, can you explain exactly how to fix it?
You have a cross-origin issue, let's explain it.
Browser downloaded js file from example.com website, now js file wants to make ajax to xyz.org website, this is a cross-origin request and so the browser asks xyz.org "do you allow example.com to access your resources"? the browser knows the answer from 'Access-Control-Allow-Origin' Response header.
But xyz.org didn't send this header so the browser assumed xyz.org doesn't want anyone but him to access his resources so the browser just refuses your request.
Note that cross-origin request happens too when you access js file in a URL beginning with file:// and origin here is set to null because js isn't downloaded from any server yet origin null is different from xyz.org.
Solution: if you control xyz.org just make it add Access-Control-Allow-Origin to response headers, you can look the internet for value format for this header.
If it's a third party website you have to call its admins and if they refuse to add the header then you simply have no solution in pure js but hey only browsers respects this policy, if you make a desktop application then it doesn't care and an example of this is Postman the REST APIs tester.
Related
This question already has answers here:
from origin 'xxx' has been blocked by CORS policy: [duplicate]
(2 answers)
Closed 3 years ago.
I'm trying to authenticate over OAUTH API using Axios. The initial request is just a simple GET to get the auth token.
axios.get(
"https://github.com/login/oauth/authorize?client_id=$ID"
).then((res) => { console.log(res) })
I immediately get:
...from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I can use an href link and it works totally fine. What could be the issue here?
In simple terms, when you are using the anchor tag, it is a link to the original site. When user click on a tag, user will be redirected to that site. But when an AJAX request user will stay in your site and sends an ajax request to the server(github in this case).
When using HTTP protocol there is a header call origin which will tell the backend server where user is from, see the below picture
So if server does not allow sources other than it self, this security check will be failed and the AJAX request won't be success. Please let me know if you need more clarifications and I'll be glad to help. Hope that helps.
This question already has answers here:
How does the 'Access-Control-Allow-Origin' header work?
(19 answers)
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
(26 answers)
Closed 4 years ago.
(translated by Google)
Hello
I have a doubt regarding the use of fetch
From my server, I access images that are hosted on another server (such as a CDN)
This piece of code works correctly. The image is shown.
var img = document.getElementById( obj );
img.src = data-src;
// data-src has the url of the image https://serverCDN/image/bar/foo.jpg
However, within the same script, same servers, same image involved, the following code does not work.
Returns the error "Access to fetch at 'https://serverCDN/image/bar/foo.jpg' from origin 'http://myServer' has been blocked by CORS policy: No 'Access -Control-Allow-Origin 'header is present on the requested resource. If an opaque response serves your needs, set the request's mode to' no-cors' to fetch the resource with CORS disabled."
fetch ( data-src ), {})
.then (
function (res) {
console.log (res)
}
);
Because the first piece of code works and the second does not?
I'm confused.
I would be interested in using fetch, because I need to access the RESPONSE HEADERS sent by the CDN server
EDIT (FOR DUPLICATED TAG)
I undestand the CORS concept, but
The Dude is...Why, the first piece of code works and the second does not?
The problem is, that the server on https://servercdn/image/bar/foo.jpg does not send a Cross Origin header. By default, JavaScript XMLHttpRequests (XHR) are bound to the same domain. You can change this behaviour by adding cross origin HTTP header to the target server.
Or a simpler way: Use jsonp: https://www.w3schools.com/js/js_json_jsonp.asp
Json issues with javascript and jquery.
Trying to load some JSON using javascript.
I have it working using:
See it here: http://jsfiddle.net/5pjha/789/
var url = "http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true";
$.getJSON(url, function (json) {
alert(JSON.stringify(json.results));
});
But it dosnt work on the following urls, why is this?
https://poloniex.com/public?command=return24hVolume
https://bittrex.com/api/v1/public/getmarkets
https://api.mintpal.com/v1/market/summary/
Are the following urls not correct JSON ?
Thanks
The google's api set the Access-Control-Allow-Origin header to *, so you could access it by cross domain.
While other urls you provided do not, so you will got an error like below:
XMLHttpRequest cannot load https://api.mintpal.com/v1/market/summary/.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://fiddle.jshell.net' is therefore not allowed
access.
I believe the issue is down to whether or not the servers you are requesting your JSON from have cross-origin resource sharing (CORS) enabled.
you can see in the headers from the google service that they set Access-Control-Allow-Origin:* This is not the case for teh other URL's you list.
To get around this you will need some form of proxy so that you can request from a server either on the same domain or a server that enables CORS.
For ajax request to any server, You need to define Access-Control-Allow-Origin header for client. which is absent in given. You need to define origin of XMLHttp request in server who can request.
For more info refer this link
This question already has answers here:
Ways to circumvent the same-origin policy
(8 answers)
Closed 6 years ago.
I created asp.net webApi and publish in somee.com. I type link xxxx.somee.com/api/xxxx is ok. But I call in Angularjs not run
$http.get('http://xxxxxx.somee.com/api')
.then(function(response) {
console.log(response);
});
I received error:
XMLHttpRequest cannot load xxxx.somee.com/api/xxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Please give the solutions. Thank you very much.
If your Angular website and API websites are running in a different domain or with ports this issue will happen.
To resolve this please add the following code into your webapiconfig.cs file.
var cors = new EnableCorsAttribute(http(s):// xxxx.somee.com/api/xxxx, "*", "*");
config.EnableCors(cors);
This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 6 years ago.
This confuses me a lot. Let's say I have 2 tabs open in my browser, one on http://aaa.com and another on http://bbb.com.
Let's say I make a request
$ajax({
method : 'POST',
url : 'http://aaa.com/SomeAction',
...
});
from the JavaScript console of my browser. The way I understand cross-origin policy is that the server only allows that request to happen if the JS console I typed it into was the one in the tab for http://aaa.com. But how does the server know that? Does my browser send it a header that tells it where the request is coming from?
is that the server only allows that request to happen if the JS
console I typed it into was the one in the tab for http://aaa.com
Not true.
Nothing stops example.com from sending an AJAX request to example.org. The Same Origin Policy however will prevent example.com from reading the response returned.
The Same Origin Policy is enforced in the client-side browser, not on the server.