I am trying to access an API from the front-end and i tried both xhr and fetch api requests.
When using fetch, i received the error "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:5500' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."
However, when using XHR, I do not receive a headers not present warning and it sucessfully fetches the JSON from the api.
I don't quite understand CORS, but my understanding is that there was no header present on the api I was requesting and therefore could not fetch the API. BUT, how was xhr able to fetch the api with the assumed lack of headers on the API? How was the request possible in an XMLHTTPRequest but not a fetch request? How would I use fetch to fetch this API? I have included both my fetch and XHR code below for reference.
Fetch Code:
fetch(requestURL, {
headers: {
"Content-Type": "application/json",
'Authorisation': 'Basic' + apiKeySecured,
"Access-Control-Allow-Origin": "*", // Required for CORS support to work
"Access-Control-Allow-Credentials": false,
"api-key": apiKeySecured,
}
}).then(function (response) {
return response.json();
})
.then(function (myJson) {
console.log(JSON.stringify(myJson));
})
.catch(error => console.error(error));
XHR code:
var xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
console.log(this.responseText);
}
});
xhr.open("GET", requestURL);
xhr.setRequestHeader(`api-key`, apiKeySecured);
xhr.send();
"Access-Control-Allow-Origin": "*", // Required for CORS support to work
... nope, that's what is causing the preflight - that's a response header, don't put it in a request (don't manually add anyAccess-Control
headers in your request, EVER - Jaromanda Xapi-key
... then you're making the same fetch request as XHR - currently you're adding 4 extra headers in fetch compared to XHR - Jaromanda X