What Is a CORS Error and How to Fix It (3 Ways)

If you are a web developer, I believe you have encountered a CORS error before during development when working with an API. There are around 15,400 questions about a CORS error asked on Stackoverflow 🥲:

If you haven’t, you might encounter the error at some point in your development journey. Usually, you will see an error message Access to XMLHttpRequest has been blocked by CORS policy on the browser console followed by a cause like one of these below:

• No ‘Access-Control-Allow-Origin’ header present
• No ‘Access-Control-Allow-Headers’ headers present
• Method not supported under Access-Control-Allow-Methods header

Before finding solutions to fix the error, we need to understand what is CORS.

What is CORS

The name explains itself, Cross-Origin Resource Sharing (CORS)is an HTTP mechanism that allows resource sharing from one origin to another origin securely. It is a mechanism for relaxing the same-origin policy of modern internet browsers.

Two URLs would be considered to be having different origins when they have different protocols, ports (if specified), or hosts.

For example, making a request from https://domain-a.com to https://domain-b.com/api-1 is considered cross-origin as they have different hostnames.

Internet browsers follow the same-origin policy and restrict cross-origin HTTP requests initiated from scripts. This means that a website is only allowed to make requests to the same origin unless the response from other origins includes the right CORS headers (the CORS headers will be listed in the next section of this article).

The same-origin policy is a security measure to prevent Cross-Site Request Forgery (CSRF). Without this policy, a malicious website would be able to read your sensitive information on another website by making an HTTP request to the website.

The same-origin policy only restricts on-page scripts from accessing data or posting data to a different origin. Other resources such as images and CSS are not restricted and can be accessed from other origins.

To access data from other origins or post data to them, CORS is needed.

Why Does a CORS Error Occur

CORS supports requests and data transfers between cross-origin browsers and servers to be carried out securely. It relies on a mechanism that checks whether the server will permit requests from other origins to make sure that the cross-origin requests are safe.

Whenever a website tries to make a cross-origin request, the browser will add these CORS headers to the request:

• Origin
• Access-Control-Request-Method
• Access-Control-Request-Headers

The server will return a response with some of these CORS headers to allow or block the request:

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

A CORS error occurs when the server doesn’t return the CORS headers required.

For example, https://domain-a.com tries to make an API request to https://domain-b.com that doesn’t allow it to access its resources. As https://domain-a.com is not included in the Access-Control-Allow-Origin header of the response, the browser will display a CORS error.

How to Fix a CORS Error

Solution 1: Configure the Backend to Allow CORS

If you have access to the backend service, you can configure the backend to handle CORS requests if they are allowed.

The basic requirement is to add Access-Control-Allow-Origin to the response header to specify the origin that is allowed to access resources from the server.

You can configure the backend to return this in the response header:

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

This will allow https://domain-a.com to make a cross-origin request to your server. However, only an origin can be added.

If you want to allow multiple origins, you can do it dynamically by reading the Origin header from the request and set it as the value for Access-Control-Allow-Origin.

Another option would be to set the header to Access-Control-Allow-Origin: * to allow requests from any URL. However, you need to be careful when using this as it could cause your server to be vulnerable to CSRF attacks.

Different backend frameworks need to be configured differently to add the CORS headers. This W3C Wiki shows you how to add the headers to popular servers like Apache, nginx, Jetty, etc.

If you are using an external API service and cannot configure the backend to accept CORS requests, you can try one of the methods below.

Solution 2: Use a Proxy Server

As the same-origin policy is implemented by internet browsers and not enforced within server-to-server communication, you can use a proxy server to call the external API.

A proxy server acts as a middleware between the client and the server. Instead of making a request from the client to the external API directly, you can make a request to the proxy server. The proxy server will make a request to the external API for you and return the response that it receives from the external API.

As a CORS error occurs when the external API server doesn’t return the HTTP headers required by the CORS standard, you can add the missing header like Access-Control-Allow-Origin: * and return the response to the browser using a proxy server.

You can either create your own proxy server or use a CORS proxy server like CORS Anywhere to retrieve data from the external API. One thing to note is that the CORS Anywhere proxy server is shared, it might be a bit slow sometimes. If you need to call the external API frequently, creating your own proxy server might be a better option.

Solution 3: Bypass the Error Using a Browser Extension

This method is not a proper solution to fix the error as it only works on your local computer which has the extension installed. However, you can use this method when you need to make a cross-origin request during development only.

To get rid of a CORS error, you can download a browser extension like CORS Unblock. The extension appends Access-Control-Allow-Origin: * to every HTTP response when it is enabled. It can also add custom Access-Control-Allow-Origin and Access-Control-Allow-Methods headers to the responses.

The way it gets rid of the CORS error is the same as using a CORS proxy server as mentioned above but this method only works on a computer with the extension installed. Therefore, you should not treat it as a real solution to fix a CORS error and should use it for development only.

Another thing to take note of is that all web requests will be monitored and response headers mentioned above will be appended when the extension is enabled. Therefore, you should only enable the extension when you need to use it and keep it disabled at other times.

When Not to Fix a CORS Error

Not every API can be used by a client. Some APIs are designed for server-side use, like the Google Maps Places API. If you try to access the API from a client, you will get a CORS error:

Although you could get rid of the error using one of the solutions above, Google strongly recommends developers to use the Google Map Places client library.

Many third-party API services provide client libraries to reduce the difficulty for developers to implement third-party functionality in their apps. For example, Bannerbear has client libraries in Ruby, Node.js and PHP for developers to integrate its Image Generation API into their apps easily.

If you are using a third-party API on the front-end and they have a client library, using the client library might be an easier option as you can avoid situations where you might run into a CORS error.