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 Acc
ess-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?