Common CORS Configurations on Apache and NGINX

These are two of the most popular ways of serving files on the web. Configuring CORS on web servers like NGINX and Apache involves adding the appropriate HTTP headers to responses. Here's how to do it on each server.

Configuring CORS on NGINX

1. Allowing All Origins

If you want to allow all origins to access your resources:
Add this to your server or location block in your NGINX configuration file (nginx.conf or site-specific configuration files):

server {
    listen 80;
    server_name example.com;

    location / {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';

        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            return 204; # No content for preflight requests
        }

        # Other configurations (e.g., proxy_pass, root, etc.)
    }
}

2. Restricting to Specific Origins

To restrict access to a single origin (e.g., https://example.com):

server {
    listen 80;
    server_name example.com;

    location / {
        add_header 'Access-Control-Allow-Origin' 'https://example.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';

        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'https://example.com';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            return 204;
        }

        # Other configurations
    }
}

3. Debugging Tip

Reload NGINX after making changes:

sudo nginx -t  # Test the configuration
sudo systemctl reload nginx

Configuring CORS on Apache

1. Enabling the mod_headers Module

Ensure that the mod_headers module is enabled. You can enable it with:

sudo a2enmod headers
sudo systemctl restart apache2

2. Allowing All Origins

To allow all origins, add this to your site configuration file or .htaccess file:

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

3. Restricting to Specific Origins

To restrict access to a specific origin, replace * with the allowed origin:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://example.com"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
    Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization"
</IfModule>

4. Handling Preflight Requests

If you need to handle OPTIONS requests for preflight:

<IfModule mod_headers.c>
    Header always set Access-Control-Allow-Origin "https://example.com"
    Header always set Access-Control-Allow-Methods "GET, POST, OPTIONS"
    Header always set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization"
    Header always set Access-Control-Max-Age "1728000"
</IfModule>

# Ensure OPTIONS requests return a 200 status
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

5. Debugging Tip

Restart Apache after making changes:

sudo systemctl restart apache2

Key Differences Between NGINX and Apache CORS Configurations

Final Tips

1. Test Headers: Use browser dev tools or a tool like Postman to check response headers.
2. Validate Changes: Use a service like https://test-cors.org to verify your CORS setup.
3. Caching: Be mindful of caching rules for CORS headers, especially in CDNs.

By configuring your web server correctly, you can manage CORS effectively and avoid those dreaded CORS errors!