What is a CORS Error and how to solve it

Almost every web developer has faced a CORS error while making API calls. Typically a CORS error looks like 'Access to XMLHttpRequest has been blocked by CORS policy' error message in the web browser console. Let's try to understand what is a CORS error.

What is CORS

CORS stands for Cross-Origin Resource Sharing (CORS), and it is an HTTP-Header-based mechanism that is used to allow the secure sharing of resources between different origins. With this mechanism, a server can relax the same-origin policy.

Same-origin policy means that a website is only allowed to make requests to the same origin. Exceptions are the cases, where the response from the other origin contains a CORS header, that allowed to access resources from the server.

What is the reason of CORS?

A CORS error occurs when the server response does not contain the CORS header required. What does it mean?

Every time your script makes a cross-origin-request, the browser will add the following CORS headers to the request:

Origin
Access-Control-Request-Method
Access-Control-Request-Headers
Request CORS Headers

The response should contain some of the CORS headers that allow or block the request:

Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Expose-Headers
Access-Control-Max-Age

So if a domain https//:main-domain.com make a request to the https://second-domain.com, that doesn't allow to access its resources, the response will not contain the Access-Control-Allow-Origin header and the browser will show the CORS error.

How do you solve a CORS Error?

Allow CORS

This option comes to mind if you control the server for the remote resources that you are requesting. That means that you can enable CORS on your server and grant permission to any origin you want.

The server should return a few different headers to let the browser know whether cross-domain requests are allowed. The most important header is  Access-Control-Allow-Origin. You can configure the backend to return this in the response header:

Access-Control-Allow-Origin: https://domain.com

This will allow https://domain.com to make a cross-origin request to your server. Or you can specify a wildcard, meaning all domains are allowed:

Access-Control-Allow-Origin: *

But be careful using this, cause it can make your server vulnerable to CSRF attacks.

What options do you have when you want to make a request from the browser to a resource on a server that you don't control and you can enable CORS?

Use Proxy

The same-origin policy only comes into play when making requests from the browser, but you can make requests from different origins if that request comes from a server. So one solution is to use a CORS proxy for cross-origin requests.

In this case proxy act like a middleman between your application and the server. Instead of making requests directly to the server, that contains the resources, you make a request to the proxy.

You can create your own proxy server or there are multiple CORS proxies out there that you can use for free.

Use a serverless function

A serverless function is actually just another way to proxy your requests. But in that case, you are not relying on a third-party service. You just need to run a function that calls a web service and return some data.

This solution solves two problems at once.

  1. We don't have to worry about exposing API credentials, because they are stored on the server-side
  2. We don't have to worry about CORS errors, because all requests running from the server.

Conclusion

The same-origin policy can be frustrating, but actually is a good thing — it prevents malicious scripts from accessing data that they shouldn’t have access to. Fortunately, CORS exists to make sure we can still safely make requests from the browser when needed, allowing developers to get data that provide richer user experiences.