Hello! I’m getting into HTTP requesting (not the most fun if I’m being honest) on my Udemy course, and I can’t seem to follow the instructor because I keep getting something called a CORs blocking issue?
Here is what I’m getting and here is my code:
const firstReq = new XMLHttpRequest();
firstReq.addEventListener('load', function() {
console.log('FIRST REQUEST WORKED!!!');
const data = JSON.parse(this.responseText);
const filmURL = data.results[0].films[0];
const filmReq = new XMLHttpRequest();
filmReq.addEventListener('load', function() {
console.log('SECOND REQUEST WORKED!!!');
const filmData = JSON.parse(this.responseText);
console.log(filmData.title);
});
filmReq.addEventListener('error', function(e) {
console.log('ERROR!!', e);
});
filmReq.open('GET', filmURL);
filmReq.send();
});
firstReq.addEventListener('error', (e) => {
console.log('ERROR!!!!!!');
});
firstReq.open('GET', 'https://swapi.co/api/planets/');
firstReq.send();
console.log('Request Sent!');
Has anyone seen this before? I would love some help on this. Thanks.
And here is the error I’m getting.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://swapi.co/api/planets/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 301.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://swapi.co/api/planets/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 301.
The error you’re encountering is a Cross-Origin Resource Sharing (CORS) issue, which is a security feature implemented by web browsers. It prevents a web page from making requests to a different domain than the one that served the web page.
In your code, you’re sending a GET request to the API endpoint https://swapi.co/api/planets/
, but this endpoint does not have the required Access-Control-Allow-Origin
header, which tells the browser that it is allowed to access the resource from a different domain. As a result, the browser blocks the request, and you get the error message you’re seeing.
There are a few ways to handle this issue:
Use a proxy: You can send your requests to a proxy server that can make the actual request to the API and return the response to you. This way, the browser won’t consider the request to be cross-origin, and you won’t encounter the CORS error.
Modify the server configuration: If you have control over the API server, you can add the Access-Control-Allow-Origin
header to the response, allowing the browser to make cross-origin requests to the API.
Use a browser extension: Some browser extensions, such as CORS Everywhere, allow you to bypass the CORS policy in the browser.
I hope this helps! Let me know if you have any further questions.
1 Like
https://swapi.co/api/planets/
does not even appear to be a valid API endpoint. What documentation did you read that said it is?
It was in the file I downloaded for the Udemy course I’m currently taking. Colt Steel JS 2022.
So I appreciate the help first. I tried the header change and it did not work.