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?
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.