How to Configure CORS in Apache?

Cross-Origin Resource Sharing (CORS) is a crucial security mechanism that allows or restricts web resources from being requested from another domain outside the one from which the first resource was served. When building modern web applications, you frequently encounter CORS errors when your frontend tries to communicate with a separate backend API. Configuring CORS in Apache involves enabling the headers module and defining specific access policies within your server configuration or .htaccess file. This article provides a straightforward guide on how to enable and configure these headers to allow secure cross-origin requests.

Step 1: Enable the Apache Headers Module

Before you can configure any CORS policies, Apache must be allowed to modify HTTP headers. This requires enabling mod_headers.

• On Ubuntu/Debian systems: Run the following command in your terminal: sudo a2enmod headers
• On CentOS/RHEL systems: This module is usually enabled by default. You can verify its inclusion in your httpd.conf file, ensuring the following line is not commented out: LoadModule headers_module modules/mod_headers.so

After enabling the module, restart your Apache service to apply the changes: sudo systemctl restart apache2 (or httpd on RHEL).

Step 2: Choose Configuration Scope

You can apply CORS configurations globally, per virtual host, or per directory.

• Global/Virtual Host Configuration: Open your main Apache configuration file (e.g., /etc/apache2/apache2.conf) or your specific virtual host file (e.g., /etc/apache2/sites-available/000-default.conf).
• Per-Directory Configuration (.htaccess): If you do not have root server access, you can place the configuration rules inside the .htaccess file located in your website’s root directory.

Step 3: Add CORS Headers

To allow cross-origin requests, you must append specific Header directives inside your chosen configuration block (such as <Directory>, <VirtualHost>, or your .htaccess file).

Option A: Allow Access from All Domains (Wildcard)

If your API or resource is intended to be completely public, you can allow any domain to access it using a wildcard (*).

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

Option B: Allow Access from a Specific Domain

For better security, specify the exact domain that is allowed to access your resources rather than using a wildcard.

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

Step 4: Handle HTTP OPTIONS Preflight Requests

Browsers often send a “preflight” request using the HTTP OPTIONS method before making the actual request to check if the server approves the cross-origin action. To ensure Apache responds to these preflight checks successfully without sending them deeper into your backend application, handle the OPTIONS method directly.

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://www.example.com"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"
    Header set Access-Control-Allow-Headers "Content-Type, Authorization"
    
    # Respond with a 200 OK directly for preflight requests
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]
</IfModule>

Step 5: Test and Verify Your Configuration

Once you save the configuration files, restart Apache once more to apply the rules. You can verify that the CORS headers are active by using a terminal tool like curl to inspect the response headers.

curl -I -X OPTIONS https://yourdomain.com

Look for the Access-Control-Allow-Origin header in the terminal output to confirm that your Apache server is successfully serving the correct configuration.