Solving CORS Issues Locally
2023-11-16
Certainly, at some point during the development of a frontend application, you may have found yourself making changes locally (on your computers) and encountered an error that, at first glance, can be a bit confusing and unfamiliar. The error message may vary, but generally, it looks like this: Error message by CORS issues
At that moment, it is natural to wonder what we mean when we talk about CORS and how it affects web application development. Below, we will explain in simple terms the general concepts that encompass CORS, as well as propose possible solutions to overcome this inconvenience.
What is CORS?
CORS is the acronym in English for "Cross-Origin Resource Sharing." Basically, it is a security mechanism implemented in web browsers that uses HTTP headers to determine the origins from which a requested resource can be accessed. These resources can include images, scripts, CSS files, among others.
It is important to note that when we talk about an origin, we refer to a set of attributes that make up an HTTP request. These attributes include the protocol, domain, and port. Therefore, if a resource is required to be accessible only from specific origins, CORS policies are used for that purpose.
How CORS Policy Works
Summing up the process that occurs when CORS policies come into play, when making a request, the server, in its response, adds certain headers to indicate to the web browser who can access that response.
The above process takes place when we want to access the resource, meaning the method used in our request is GET. For other scenarios, when it is necessary to modify the resource and methods like PUT, DELETE, PATCH, among others, are used, an additional validation process (preflight) occurs. In this process, we use an OPTION method request to validate if the original request can take place. If the response is negative, the browser blocks the original request; otherwise, it proceeds.
If we consider the explanation above, it is logical that when conducting local development and trying to access a resource protected by CORS rules, such access is restricted. This is mainly because the hostname (localhost) on which our application is running is not enabled to perform that operation. However, there are some alternatives that allow us to access these resources, such as:
-
Installing an extension that acts as a proxy and helps modify response headers to allow access to the requested resource is an excellent alternative. Among the various options available, we recommend using "Allow CORS: Access-Control-Allow-Origin." This extension allows us, when activated and configured correctly, to add the necessary headers for our browser to understand that the resource we want to access is accessible from the requested origin, especially when developing on localhost and specific ports. By installing and activating the extension, you can configure it to automatically add the necessary CORS headers in server responses. This will allow the browser to access the requested resource without CORS policy restrictions.
-
Another very useful option for standardizing development processes is to install a proxy as an additional package. When starting the project locally, the proxy also starts and provides behavior similar to the extension mentioned earlier. An example of this is the "Local CORS Proxy." Additionally, you can also manually build your own proxy following the steps described in the following article.
Using a proxy allows you to configure and customize CORS rules centrally, which is especially useful in more complex projects or collaborative development teams. By using a proxy, you can easily define which resources and origins are allowed, avoiding the need to make adjustments in each client-side code request.
The "Local CORS Proxy" and similar alternatives allow you to specify CORS rules in a configuration file or through command line options. This simplifies the development process and ensures that all developers in the project follow the same established CORS policies. It is important to remember that these alternatives are intended only for the local development environment. In a production environment, it is crucial to properly configure CORS policies to ensure the security and protection of resources.
In summary, while CORS rules can make it challenging to access protected resources during local development, there are solutions such as configuring the server with appropriate CORS headers or using temporary tools to disable CORS policies in the browser. This allows us to access the necessary resources while developing in a secure environment.
Referencias: