To understand how Cross-Origin Resource sharing works, you can read the informative guide we’ve written here

So, to configure Apache for Cross-Origin Resource Sharing, you’ll need to make changes to its configuration files, and here are the steps you need to follow:

Access Apache Configuration File

Apache’s main configuration file is often named httpd.conf. Open this file using a text editor with administrative privileges.

   sudo nano /etc/httpd/conf/httpd.conf

Enable the mod_headers Modules

You need to ensure that the necessary Apache modules are enabled. CORS requires the mod_headers module, which is responsible for manipulating HTTP headers. If you are using Ubuntu or Debian, run the following command:

sudo a2enmod headers

If you are using RHEL, CentOS, or Fedora, run the following command:

sudo yum install mod_headers

Configure CORS Headers:

You can add the CORS headers to either the global Apache configuration file (usually located at /etc/apache2/apache2.conf or /etc/httpd/conf/httpd.conf) or the virtual host configuration file for a specific domain.

Global Configurations

To add the CORS headers to the global Apache configuration file, add the following lines to the file:

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"

Specific a Single Domain

To add the CORS headers to the virtual host configuration file for a specific domain, add the following lines to the file:

<VirtualHost *:80>
    ServerName example.com

    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"
</VirtualHost>

Replace example.com with the domain name of your website.

Specify multiple Domains

There are two ways to specify multiple domains using CORS in Apache:

• Using the Header always set Access-Control-Allow-Origin directive

This directive allows you to set the value of the Access-Control-Allow-Origin header to a specific domain or list of domains. For example, to allow requests from the domains example.com and subdomain.example.com, you would add the following directive to your Apache configuration file:

Header always set Access-Control-Allow-Origin "https://example.com, https://subdomain.example.com"

If you want to allow requests from all domains, you can use the wildcard character (*). However, this is not recommended, as it reduces the security of your website.

• Using the SetEnvIf directive:

The SetEnvIf directive allows you to set an environment variable based on the value of a specific HTTP header. For example, to set the environment variable CORS_ALLOWED_ORIGINS to the value of the Origin header, you would add the following directive to your Apache configuration file:

SetEnvIf Origin "https://(.*)$" CORS_ALLOWED_ORIGINS=$0

Once you have set the CORS_ALLOWED_ORIGINS environment variable, you can use it to set the Access-Control-Allow-Origin header using the Header always set directive:

Header always set Access-Control-Allow-Origin %{CORS_ALLOWED_ORIGINS}e

This approach is more flexible than the first approach, as it allows you to use regular expressions to match multiple domains.

Which approach you use depends on your specific needs. If you only need to allow requests from a few specific domains, then the first approach is simpler. If you need to allow requests from a more complex set of domains, then the second approach is more flexible.

Here is an example of a complete Apache configuration file that allows requests from the domains example.com and subdomain.example.com:

<VirtualHost *:80>
  ServerName example.com
  ServerAlias subdomain.example.com

  Header always set Access-Control-Allow-Origin "https://example.com, https://subdomain.example.com"

  DocumentRoot /var/www/example.com
</VirtualHost>

Once you have made the necessary changes to your Apache configuration file, you need to restart the Apache server. Once the server has restarted, the CORS headers will be set and requests from the specified domains will be allowed.

CORS requests with Specific headers

To use CORS requests with specific headers in Apache, you need to:

Enable the mod_headers module

This module is required to set and modify HTTP headers. To enable mod_headers, run the following command:

a2enmod headers

Set the Access-Control-Allow-Headers header.

This header tells the browser which headers the server will allow in CORS requests. For example, to allow the Content-Type and Authorization headers, you would add the following directive to your Apache configuration file:

Header always set Access-Control-Allow-Headers "Content-Type, Authorization"

Here is an example of a complete Apache configuration file that allows CORS requests with the Content-Type and Authorization headers:

<VirtualHost *:80>
  ServerName example.com

  Header always set Access-Control-Allow-Headers "Content-Type, Authorization"

  DocumentRoot /var/www/example.com
</VirtualHost>

Once you have made the necessary changes to your Apache configuration file, you need to restart the Apache server. Once the server has restarted, the Access-Control-Allow-Headers header will be set and CORS requests with the specified headers will be allowed.

Note: You can also use the .htaccess file to set the Access-Control-Allow-Headers header. However, it is generally recommended to make changes to the Apache configuration file directly, as this is more robust and less likely to be overridden by other configuration files.

CORS with preflight request

To use CORS with a preflight request in Apache, you need to:

Enable the CORS module in Apache. You can do this by adding the following line to your httpd.conf file:

LoadModule headers_module modules/mod_headers.so

Add the following headers to your .htaccess file or to the <Directory> section of your httpd.conf file:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization"

This will allow all origins to make CORS requests to your server using any of the listed methods and headers.

If you need to restrict access to certain origins or methods, you can do so by modifying the Access-Control-Allow-Origin and Access-Control-Allow-Methods headers. For example, to allow only requests from the origin https://example.com using the GET method, you would change the headers to the following:

Header set Access-Control-Allow-Origin "https://example.com"
Header set Access-Control-Allow-Methods "GET"

Restart Apache for the changes to take effect.

Once you have configured Apache for CORS, your server will be able to handle preflight requests correctly.

Here is an example of a preflight request that an Apache server would receive:

OPTIONS /api/users HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: X-Auth-Token

Apache would respond to this request with the following headers:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: X-Auth-Token

This indicates that the Apache server allows GET requests to the /api/users endpoint from the origin https://example.com with the header X-Auth-Token.

The browser would then make the actual request:

GET /api/users HTTP/1.1
Origin: https://example.com
X-Auth-Token: 1234567890

Apache would then respond to the actual request with the requested data.

Conclusion

Configuring Apache for CORS is a crucial step in ensuring that your web applications function smoothly while maintaining security standards. By understanding the basics of CORS and following the steps outlined above, you can confidently set up Apache to allow cross-origin resource sharing, facilitating seamless communication between your web application and external domains. Always remember to test thoroughly and adapt the configuration to meet the specific requirements of your project.

More related articles to explore

• A beginner’s Guide to Cross-origin Resource Sharing (CORS)
• How to Enable Cross-Origin Resource Sharing (CORS) in Nginx?
• How to configure Apache to use a custom 404 error page?
• How to host a Laravel application on Ubuntu using Apache
• How to deploy WordPress on a Ubuntu LAMP Server
• How can I simulate traffic on a Linux server using Apache Bench?
• How to troubleshoot Apache “Connection refused” error?
• How to install Apache Server on Ubuntu Linux
• How to Troubleshoot Apache not Serving Web Pages?