Background information
HTTP response headers are a component of the header section in response messages that are transmitted over HTTP. HTTP response headers include specific parameters that are sent to clients.
If a requested resource is not cached on POPs, the request is redirected to the origin server. Then, the origin server returns the requested resource to the POPs. You can rewrite HTTP response headers from origin servers. This way, clients can easily identify response information. For example, you can rewrite the value of the Content-Type header before the header is returned to clients to ensure that the clients can parse the content that is retrieved from the origin server. If the Content-Type header returned by the origin server is invalid, garbled text appears. In this case, the value of Content-Type must be rewritten on POPs.
Note After an origin server receives a request from a POP, the origin server returns an HTTP message. A rewrite rule rewrites only HTTP headers in responses that are returned from an origin server. A rewrite rule does not rewrite HTTP headers in responses that are directly returned from POPs.
You cannot configure custom HTTP response headers for wildcard domain names.
Scenarios
Invalid value of Content-Type: If the value of Content-Type
that is returned by the origin server does not match the actual type of the content, the clients may fail to parse the content. For example, if an HTML file is incorrectly marked as plain text, you can rewrite the response header.
In this example, change Content-Type: text/plain
to Content-Type: text/html
.
Cache policies: If you want to maintain precise cache control, you can adjust the Cache-Control
or Expires
response header. This optimizes the update frequency and hit rate of the cached content.
In this example, change Cache-Control: max-age=3600
to Cache-Control: max-age=86400
to extend the cache validity period. For more information, see Default cache rule and priorities of cache rules.
CORS: If you want to allow web applications from other domains to access resources hosted on Alibaba Cloud CDN, set Access-Control-Allow-Origin
and other related CORS headers on the origin server. These settings ensure that Alibaba Cloud CDN provides correct response headers to the clients when a cross-origin request is initiated. For more information, see Configure CORS.
Examples:
Access-Control-Allow-Origin: *
: Access from all domains is allowed.
Access-Control-Allow-Methods: GET, POST, OPTIONS
: The HTTP methods that clients are allowed to use are GET, POST, and OPTIONS.
Compression: If compression is supported but disabled for the origin server or the compression algorithm that is used is not optimal, you can configure the Accept-Encoding
response header to enable the origin server to use the optimal compression method.
In this example, change Accept-Encoding: gzip, deflate
to Accept-Encoding: br
to use Brotli compression first. For more information, see Configure Brotli compression.
Redirection: If the origin server needs to redirect a request to a different URL, you can use this feature to set the correct redirect response header. For more information, see Configure 301/302 redirection.
Example: Location: https://www.example.com/new-page.html
. The value of the Location header specifies the new address of the requested resource after a POP receives the HTTP status code 301 or 302 that is returned by the origin server.
Custom origin response headers: If you want the origin server to return custom HTTP headers for special requirements, you can configure custom HTTP response headers.
Usage notes
If multiple rules are configured for the same header, the rules are executed from top to bottom in the configuration list. Examples:
In the preceding combined configurations, Configuration 2 takes effect.
Procedure
Log on to the Alibaba Cloud CDN console.
In the left-side navigation pane, click Domain Names.
On the Domain Names page, find the domain name that you want to manage and click Manage in the Actions column.
In the left-side navigation tree of the domain name, click Origin Fetch.
Click the Custom Response Headers tab.
Click Customize.
Configure the parameters in the Custom Response Headers dialog box.
Important When different operations are performed on the same response header at the same time, the operations have different priorities. The operations are prioritized in the following descending order: Replace > Add > Change or Delete. For example, if you perform the Add and Delete operations on the same response header at the same time, the response header is added and then deleted.
Parameters of the Add operation
Parameter | Example | Description |
Operation | Add | This operation adds a response header to response messages from an origin server. |
Response Header | Custom Response Header | You can select a preset header or select Custom Response Header from the Response Header drop-down list to specify a response header. |
Header Name | x-code | The name of the custom response header is x-code. |
Header Value | key1 | You can specify multiple values for a response header. Separate the values with commas (,). |
key1,key2 |
Allow Duplicates | Yes | Yes: You can add duplicate response headers. Example: x-code:key1 and x-code:key2 . No: The latest header value overwrites the existing header value that uses the same header name. For example, if you add x-code:key1 and then add x-code:key2 , only x-code:key2 takes effect.
|
Rule Condition | Do not use conditions | Rule conditions can identify parameters in a request to determine whether a configuration takes effect on the request. |
Parameters of the Delete operation
Parameter | Example | Description |
Operation | Delete | This operation deletes all response headers that match the values of the Response Header and Header Name parameters. Duplicate response headers are also deleted. |
Response Header | Custom Response Header | You can select a preset header or select Custom Response Header from the Response Header drop-down list to specify a response header. |
Header Name | x-code | The name of the custom response header is x-code. |
Rule Condition | Do not use conditions | Rule conditions can identify parameters in a request to determine whether a configuration takes effect on the request. |
Parameters of the Change operation
Parameter | Example | Description |
Operation | Change | You can perform the Change operation only if no duplicate response headers exist. |
Response Header | Custom Response Header | You can select a preset header or select Custom Response Header from the Response Header drop-down list to specify a response header. |
Header Name | x-code | The name of the custom response header is x-code. |
Change Value To | key1,key3 | You can specify multiple values for a response header. Separate the values with commas (,). |
Rule Condition | | Rule conditions can identify parameters in a request to determine whether a configuration takes effect on the request. |
Parameters of the Replace operation
Parameter | Example | Description |
Operation | Replace | You can perform the Replace operation only if no duplicate response headers exist. |
Response Header | Custom Response Header | You can select a preset header or select Custom Response Header from the Response Header drop-down list to specify a response header. |
Header Name | x-code | The name of the custom response header is x-code. |
Find | key | You can search for the value that you want to replace by using regular expressions. |
Replace With | abc | You can replace matching values by using regular expressions. |
Match | Match All | Match All: All matching values are replaced. For example, if you use a regular expression to replace all strings of "key" in x-code:key1,key2,key3 with abc, the key-value pair is changed to x-code:abc1,abc2,abc3 . Match the First Only: Only the first matching value is replaced. For example, if you use a regular expression to replace the first string of "key" in x-code:key1,key2,key3 with abc, the key-value pair is changed to x-code:abc1,key2,key3 .
|
Rule Condition | | Rule conditions can identify parameters in a request to determine whether a configuration takes effect on the request. |
Click OK.
Default preset response headers
By default, Alibaba Cloud CDN provides the following HTTP response headers: Cache-Control, Content-Type, Expires, and Last-Modified. These response headers are important components of the HTTP protocol that are used to control the cache, define the content type, specify the cache expiration time, and record the last modified time of a resource.
Preset response header in Alibaba Cloud CDN | Description | Example |
Cache-Control | Specifies how and how long a resource can be cached by POPs and client browsers. This response header has a higher priority than Expires . | Cache-Control: no-cache enforces every request to be submitted to the origin server for validation before the cached content is used.
Cache-Control: max-age=3600 indicates that the cached content is valid within 3,600 seconds (1 hour) and can be directly served from a POP.
|
Content-Type | Describes the data type of the resource that is returned to the client. This response header helps the client correctly interpret and display the received resource and facilitates subsequent data handling and transmission. | |
Expires | Specifies an exact date or time after which the cached content expires. When the content expires, the POP immediately requests an updated resource from the origin server. Compared with the Expires header, Cache-Control , which is introduced in HTTP/1.1, is preferred by users because it provides more fine-grained control. | Expires: Thu, 01 Dec 2023 16:00:00 GMT indicates that the content expires after the specified time.
|
Last-Modified | Specifies the time when the resource was last modified. Alibaba Cloud CDN and browsers use this response header to determine whether the resource was modified since the last cache. | Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT indicates the time when the resource was last modified.
|
Examples
Example 1: Specify that the content that is returned to users is of the MIME type
Sample scenario
Add a response header to specify that the content that is returned to users is of a specified MIME type.
Note MIME content includes the following types:
Text: including text files such as .txt and .csv files, and HTML files such as .html, .htm, .and shtml files.
Images: including common image files such as .jpg, .png, and .gif files.
Audio: including audio files such as .mp3 and .wav files.
Video: including video files such as .mp4 and .avi files.
Application: including application files such as .pdf, .doc, and .xls files.
Configurations
Expected result: The origin server adds the Content-Type header whose value is text/html to the response that is returned to POPs. If the configuration is updated, the value is overwritten.
Example 2: Delete a response header
Sample scenario
Delete a response header from responses.
Configurations
Expected result: The Content-Type header is deleted from the response before the header is returned to the user.
Note If the Add operation in Example 1 and the Delete operation in Example 2 are performed, the Content-Type header that has the value text/html is added to the response and then deleted. As a result, the content that is returned to the user is of the original type instead of a specified MIME type.
FAQ
Why is a CORS issue reported and the Access-Control-Allow-Origin response header not returned even if I have configured the response header?
Possible causes
Incorrect configuration: The configuration is incorrect or does not take effect.
POP cache: The POP cache is returned, but the cache does not contain the new response header that you added.
Origin server: The CORS response headers that you configured on Alibaba Cloud CDN POPs may conflict with the response headers that are returned from the origin server. In this case, you must make sure that the response header configurations between CDN and the origin server are the same.
Browser cache: The cached response by the browser already expired.
Solutions
Verify the configurations: Make sure that the CDN configurations, especially the CORS response headers, are correct and in effect.
Clear the CDN cache: You can use the refresh feature of Alibaba Cloud CDN to clear the cached content and then re-access the resource. For more information, see Refresh and prefetch resources.
Check origin server settings: Make sure that the response headers returned from the origin server do not conflict with the headers that you configured on Alibaba Cloud CDN POPs. We recommend that you set the response headers returned from an origin server to be the same as those returned from POPs.
Clear the browser cache: Clear the browser cache or use the private browsing mode to ensure that the browser obtains the updated response headers.
Contact technical support: If the issue persists, contact Alibaba Cloud CDN technical support or submit a ticket.
How do I verify that I correctly added origin response headers, such as Access-Control-Allow-Origin?
If your origin server is an ECS instance
Perform the following steps for verification:
Log on to the ECS console to access your ECS instance.
Check the CORS configuration for the web server.
The configurations of CORS response headers may vary based on the web server or application. The following examples show how to check the CORS configuration for common web servers Apache and NGINX.
Apache
In the.htaccess
file or the server configuration file, such as httpd.conf
or vhosts.conf
, search for content similar to the following setting:
Header set Access-Control-Allow-Origin "*"
You can also check the CORS configurations of a specific domain name:
Header set Access-Control-Allow-Origin "http://example.com"
Confirm that these configurations exist and are correctly set.
Nginx
In the NGINX configuration file, such as /etc/nginx/nginx.conf
or /etc/nginx/sites-available/default
, find the server
block related to your application and check the following configurations:
location / {
add_header 'Access-Control-Allow-Origin' '*';
}
You can also check the CORS configurations of a specific domain name:
location / {
add_header 'Access-Control-Allow-Origin' 'http://example.com';
}
Confirm that these configurations exist and are correctly set.
Restart the web server.
If you modify the configuration file in the previous step, restart the web server for the modification to take effect. For example, you can use the following command to restart the server of Apache or NGINX.
Check the new response header by using a web browser.
On the Network tab of DevTools of your web browser, access your resource and check if the Access-Control-Allow-Origin
header is included in the response. If it is not included in the response, the configurations did not take effect or the cached response is not updated.
If your origin server is an OSS bucket
Alibaba Cloud Object Storage Service (OSS) supports CORS. To check whether response headers, such as Access-Control-Allow-Origin
, are correctly set in the OSS console, perform the following steps:
Log on to the OSS console.
In the left-side navigation pane, click Buckets. On the Buckets page, find and click the desired bucket.
In the left-side navigation tree, choose .
In the CORS rule list, check whether the Access-Control-Allow-Origin
header is included and whether the setting is correct.
If you want the OSS bucket to allow access from all sources, set Access-Control-Allow-Origin
to *
.
If you want the OSS bucket to allow access only from specific sources, set Access-Control-Allow-Origin
to the addresses of the specific sources, such as https://yourdomain.com
.
Check other CORS headers.
In addition to Access-Control-Allow-Origin
, you may also need to check whether the following CORS headers are correctly configured:
Access-Control-Allow-Methods
: specifies allowed HTTP methods, such as GET
, POST
, PUT
, and DELETE
.
Access-Control-Allow-Headers
: specifies the custom request headers that are allowed if a request contains non-standard header fields.
Access-Control-Max-Age
: specifies how long the results of a preflight request (OPTIONS) can be cached.
Save the settings.
If the settings are incorrect or need to be updated, follow the on-screen instructions to change the settings and save the changes. Then, wait for a period of time for the changes to take effect.
For more information, see CORS.
If the issue persists or a new issue occurs during troubleshooting, contact Alibaba Cloud CDN technical support or submit a ticket.