What is CORS and How to Manage It

Cross-Origin Resource Sharing (CORS) is a security mechanism implemented in modern browsers to regulate access to web resources from domains other than the one that originated the request. This mechanism is essential to protect users from attacks such as Cross-Site Request Forgery (CSRF), but it can be a challenge for developers working with APIs or applications distributed across multiple domains.

🔗 Do you like Techelopment? Check out the site for all the details!

How CORS Works

When a web application makes an HTTP request to a domain other than the one it was loaded from (for example, an AJAX request from https://mysite.com to https://api.external.com), the browser checks the CORS policies. These policies are defined by the destination server through HTTP headers, such as:

• Access-Control-Allow-Origin: Specifies which origins can access the resource.
• Access-Control-Allow-Methods: Lists the allowed HTTP methods (GET, POST, PUT, DELETE, etc.).
• Access-Control-Allow-Headers: Specifies which custom headers can be sent in the request.

If the server does not provide the necessary permissions, the browser blocks the request and generates a CORS error. This means that I will not be able to invoke the exposed APIs on https://api.external.com from the site https://mysite.com because the domain mysite.com is different from api.external.com.

Types of requests subject to CORS:

• Simple Requests: Requests that meet certain criteria (for example, using HTTP methods like GET or POST without custom headers). They do not require a "preflight request".
• Preflight Requests: Requests automatically sent by the browser before the main request to verify CORS policies. They are common with methods like PUT or DELETE, or when using custom headers.

Why Manage (or Avoid) CORS

CORS blocking can become a problem when developing distributed applications, where the frontend and backend are on different domains or ports. This is common in local development environments or with microservices-based architectures.
Avoiding or bypassing CORS is necessary to ensure that applications function properly, especially during development and testing.

How to Manage CORS

Here are some techniques to be able to manage CORS enablements in a controlled manner.

1. Configure the Server

The best solution is to configure the server to allow CORS requests. Here is how to do it with Node.js and Apache HTTP server:

• Node.js with Express

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); // Allow all origins
// Allow specific origin
app.use(cors({ origin: 'https://mysite.com' }));

app.get('/api', (req, res) => {
  res.json({ message: 'CORS enabled!' });
});

app.listen(3000, () => console.log('Server started!'));

• Apache HTTP Server

If you use Apache HTTP Server as a backend or intermediate server, you can configure CORS headers directly in the Apache configuration file. Add the following directives to your site configuration or .htaccess file:

Allow all origins (only for testing or secure environments):

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</IfModule>

Allow requests only from specific domains:
To improve security, specify a specific origin instead of allowing all origins:

<IfModule mod_headers.c>
    <Limit OPTIONS>
        Header set Access-Control-Allow-Origin "https://mysite.com"
        Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
        Header set Access-Control-Allow-Headers "Content-Type, Authorization"
    </Limit>
</IfModule>

Enable Required Modules
Make sure mod_headers and mod_rewrite are enabled:

a2enmod headers
a2enmod rewrite
service apache2 restart

If you want to apply the rules to a single endpoint or directory, you can put these directives in a <Directory> or <Location> block.
For example:

<Location "/api">
    Header set Access-Control-Allow-Origin "https://mysite.com"
    Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</Location>

2. Use a Proxy

A proxy can be used to bypass CORS restrictions during development. The proxy acts as an intermediary between the frontend and the backend, making it appear that requests are coming from the same domain.

3. Use a CDN or Middleware

Some services like AWS API Gateway, Cloudflare, or middleware on your servers can handle CORS requests automatically, reducing complexity.

4. Disable CORS (Local Tests Only)

In development environments, you can temporarily disable CORS in your browser. For example, by starting Chrome with the flag:

chrome --disable-web-security --user-data-dir="/path/to/temp/dir"

⚠️ Note: This solution is extremely risky and should never be used in production.

In summary

CORS is an essential security measure that protects users from unauthorized cross-domain requests. However, it can be a hindrance when developing web applications. The most secure solutions include proper server configuration and the use of proxies during development. Disabling CORS is an option that should only be considered in test environments and never in production.
Properly managing CORS is essential to ensuring the security and proper functioning of modern web applications.

---

Follow me #techelopment

Official site: www.techelopment.it
Medium: @techelopment
Dev.to: Techelopment
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
youtube: @techelopment
whatsapp: Techelopment