CORS headers

In today’s interconnected web ecosystem, modern applications frequently interact with external APIs, CDNs, and third-party services. However, browsers enforce strict security mechanisms to prevent unauthorized data access between different domains. One such mechanism is the CORS (Cross-Origin Resource Sharing) policy.

CORS headers play a critical role in controlling how resources are shared across origins and ensuring secure communication between browsers and servers. This article explains what CORS headers are, how they work, and how to configure them securely.

What Are CORS Headers?

CORS headers are HTTP response headers that define which external domains are permitted to access your server’s resources. They are a key part of the browser’s security model, designed to protect users from malicious websites that attempt to access data from other domains without authorization.

In simple terms, CORS headers tell the browser:

“This specific website or domain is allowed to access my resources.”

Without these headers, browsers block the request and display an error such as:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Why CORS Exists

By default, web browsers follow the Same-Origin Policy (SOP) — meaning a web page can only request resources from the same domain, protocol, and port.

For example:

• Page Origin: https://www.gowrishankar.me
• API Endpoint: https://api.findnearme.io

Since both are different domains, any request from the first to the second must comply with CORS rules. If the server doesn’t explicitly allow it, the browser blocks the request to prevent unauthorized access.

Common CORS Headers Explained

Header	Purpose	Example
Access-Control-Allow-Origin	Specifies which domain(s) can access the resource.	Access-Control-Allow-Origin: https://www.gowrishankar.me
Access-Control-Allow-Methods	Defines which HTTP methods are allowed (GET, POST, etc.).	Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers	Lists custom headers permitted in cross-origin requests.	Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials	Allows cookies or authentication data in requests.	Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers	Defines which response headers are visible to the browser.	Access-Control-Expose-Headers: X-Auth-Token
Access-Control-Max-Age	Specifies how long the preflight response can be cached.	Access-Control-Max-Age: 86400

Example Configurations

1. Nginx

location /api/ {
    add_header 'Access-Control-Allow-Origin' 'https://www.gowrishankar.me';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
}

2. Apache

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://www.gowrishankar.me"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
    Header set Access-Control-Allow-Headers "Origin, Content-Type, Accept, Authorization"
</IfModule>

3. Node.js (Express)

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://www.gowrishankar.me');
  res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, Authorization');
  next();
});

Security Considerations

While enabling CORS is necessary for legitimate cross-domain communication, improper configuration can expose your application to security risks. Consider the following best practices:

1. Avoid using wildcard (*) origins for APIs that handle sensitive data.
   Instead, explicitly specify trusted domains.
2. Limit allowed HTTP methods to only what is required (GET, POST, etc.).
3. Do not enable credentials unless absolutely necessary.
4. Use HTTPS for all cross-origin communications to ensure encryption and data integrity.

Troubleshooting Common CORS Errors

Error Message	Cause	Resolution
No 'Access-Control-Allow-Origin' header	Server didn’t include the required CORS header.	Add the header with the correct domain.
CORS policy: Method not allowed	The request uses an HTTP method not listed in Access-Control-Allow-Methods.	Add the method (e.g., PUT, DELETE) to your configuration.
Credentials flag is true, but Access-Control-Allow-Origin is *	You can’t use * when allowing credentials.	Replace * with a specific domain.

Conclusion

CORS headers are a fundamental part of modern web security. They enable controlled communication between browsers and servers while maintaining protection against malicious cross-site attacks.

By understanding and correctly configuring CORS headers such as Access-Control-Allow-Origin, developers can ensure both functionality and security when building cross-domain web applications.