CORs HTTP Request Issue

[danpetroski]

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.

[danpetroski]

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.

[Nathan.clark88]

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.

[danpetroski]

It was in the file I downloaded for the Udemy course I’m currently taking. Colt Steel JS 2022.

[danpetroski]

So I appreciate the help first. I tried the header change and it did not work.