If you've run into CORS errors while trying to pull data from an external API, you're not alone. This article will give you a straightforward look at how CORS works, why it matters, and how you can fix those errors when they pop up.
What is CORS?
CORS is a mechanism that relaxes the restrictions imposed by the Same-Origin Policy (SOP). The SOP prevents web pages from making requests to a different origin than the one that served the page. An origin is defined by the combination of scheme (http or https), hostname, and an optional port.
Origin structure
By using specific HTTP headers such as Access-Control-Allow-Origin, CORS allows controlled cross-origin requests.
Access-Control-Allow-Origin: your-origin.com
Access-Control-Allow-Origin header
Why Does CORS Exist?
CORS was introduced to balance security and functionality in modern web applications. The Same-Origin Policy is crucial for security as it prevents unauthorized data access. However, it also limits interactions with external APIs and resources. CORS addresses this limitation by explicitly allowing requests from trusted origins, thereby enabling resource sharing across different origins.
What CORS Is Not
CORS is not a security solution, its function is to manage access control. It is designed to allow cross-origin requests under specified conditions. It is also not the mechanism for blocking the request, it is SOP that blocks the request, while CORS is the mechanism to allow it.
Handling CORS Errors
When you encounter CORS errors in the browser, here are three approaches to resolve them:
1. If You Control the Backend/Resource
Update your server configuration to include the appropriate CORS headers. This informs the browser that the resource can be safely shared with the requesting origin.
Access-Control-Allow-Origin: your-origin.com
Access-Control-Allow-Origin header
2. Using a Backend
If you do not control the external resource but have your own backend server, you can route the request through your server. Since CORS restrictions only apply to browser requests, a request via the backend bypasses these limitations.
3. Utilizing a CORS Proxy
If you don't have a backend, a CORS proxy service can be used. The proxy makes the request on your behalf and returns the result, effectively bypassing the browser's CORS restrictions. Here is how to do it with Corsfix:
fetch("https://proxy.corsfix.com/?<TARGET_URL>");
Fetch using a CORS Proxy
Conclusion
To wrap things up, remember that CORS is all about managing access between different domains. When you face CORS errors, your options include configuring your backend properly, proxying your requests through your server, or using a CORS proxy.
If you are looking for a CORS proxy, check out Corsfix. It is free to get started, and you only need to upgrade when you go to production.
Top comments (3)
Awesome article, thanks for sharing
thank you Milad! I think you will also enjoy reading my other articles
have you run into a CORS error before? let me know in the comments