CDN:Configure CORS

What is CORS?

Cross-origin resource sharing (CORS) is a standard cross-origin solution that is provided by HTML5 to allow web pages to access and load resources from different origin servers. This ensures the security of data transmission. For more information, see Cross-Origin Resource Sharing (CORS).

Benefits

For security purposes, browsers use the same-origin policy. This restricts scripts from initiating requests to access and load resources from different domains or subdomains, or over different protocols or ports. For example, example.com cannot access resources on example.org. When you configure CORS, you can specify response headers that points of presence (POPs) return to clients. This way, if a request carries a header that is included in the allowed headers, the corresponding HTTP response header is returned, and the requested resources can be accessed and loaded even from a different origin.

How CORS works

CORS not enabled

1. A client sends a request for http://example.com/index.html to example.com. example.com returns the index.html file to the client, and a script in the index.html file initiates a request for http://example.org/api.

2. The client sends a request that contains the Origin:example.com header to example.org. By default, the POP does not return the cross-origin header because CORS is not enabled. Due to cross-origin restrictions, the browser blocks the response to this request, resulting in the error "No 'Access-Control-Allow-Origin' header is present on the requested resource" displayed.

CORS enabled

1. A client sends a request for http://example.com/index.html to example.com. example.com returns the index.html file to the client, and a script in the index.html file initiates a request for http://example.org/api.

2. The client sends a request that contains the Origin:example.com header to example.org. After CORS is enabled, the POP checks whether the value of the Origin header in the request matches the value of the Access-Control-Allow-Origin header. Exact match and wildcard domain name match of one or more values are supported. If the values match, the cross-origin header is returned, such as Access-Control-Allow-Origin:http://example.com.

3. After the client receives the response, if the value of the cross-origin response header is http://example.com, which complies with the CORS policy, the result is displayed.

Usage notes

• If the origin server is an Object Storage Service (OSS) bucket and CORS is configured in both the OSS and Alibaba Cloud CDN consoles, the CORS settings in Alibaba Cloud CDN are used. For more information, see CORS.

• If the origin server is an on-premises server or an ECS instance, we recommend that you separate dynamic content from static content. This way, the delivery of static content is accelerated by Alibaba Cloud CDN. The CORS settings in Alibaba Cloud CDN take effect only for static resources.

Enable CORS

1. Log on to the Alibaba Cloud CDN console.

2. In the left-side navigation pane, click Domain Names.

3. On the Domain Names page, find the domain name that you want to manage and click Manage in the Actions column.

4. In the left-side navigation tree of the domain name, click Cache.

5. Click the POP HTTP Response Header tab.

6. Click Customize.

7. Configure the parameters according to the following table and click OK.

   

   Parameter	Example
   Operation	Add
   Response Header	Access-Control-Allow-Origin
   Header Value	* Note You can set this header to an asterisk (*), which matches all origins. If this header is not set to an asterisk (*), you can configure one or more IP addresses, domain names, or a combination of IP address and domain names. Separate multiple values with commas (,). If you set Header Value to a value other than a wildcard character (*), the value must start with http:// or https://. Port numbers are supported. Wildcard domain names are supported.
   Allow Duplicates	No Note Yes: Duplicate headers are allowed. The header that is returned from the origin server and the header that is added to the response are returned to the client. No: Duplicate headers are not allowed. The header that is returned from the origin server is overwritten by the header that is added to the response. Important The Allow Duplicates and CORS settings are mutually exclusive. If you set Allow Duplicates to Yes, CORS becomes invalid.
   CORS	Enable Note You can configure the CORS parameter only if you set Operation to Add and Response Header to Access-Control-Allow-Origin. Valid values of CORS: Disable and Enable. Default value: Disable. Disable: POPs do not check the Origin header in user requests. In this case, POPs return the configured value of Access-Control-Allow-Origin. Enable: POPs check the Origin header in user requests and specify a value for the Access-Control-Allow-Origin header based on the following rules: Wildcard pattern match: If you set the Access-Control-Allow-Origin header to an asterisk (*), Access-Control-Allow-Origin:* is returned regardless of whether user requests contain the Origin header or the value that is specified for the Origin header.Response Header Exact match: You can specify one or more values for the Access-Control-Allow-Origin header. Separate multiple values with commas (,).Response Header If the value of the Origin header in a user request matches a value of the Access-Control-Allow-Origin header, the matched value of the Access-Control-Allow-Origin header is returned. If the value of the Origin header in a user request does not match a value of the Access-Control-Allow-Origin header, the Access-Control-Allow-Origin header is not returned. Wildcard domain name match: If you set the Access-Control-Allow-Origin header to a wildcard domain name, the value of the Origin header is matched against the wildcard domain name.Response Header If you set the CORS parameter to Enable and the value that you want to specify for the Header Value parameter contains a hyphen (-), you need to escape the hyphen (-) to %-. Examples: Original response header value: http://doc.aliyun-example.com. Escaped response header value: http://doc.aliyun%-example.com.

8. Configure the parameters according to the following table and click OK.

   

   Parameter	Example
   Operation	Add
   Response Header	Access-Control-Allow-Methods
   Header Value	GET, POST, or PUT Note If you want to add GET, POST, and PUT at the same time, separate them with commas (,).
   Allow Duplicates	No Note Yes: Duplicate headers are allowed. The header that is returned from the origin server and the header that is added to the response are returned to the client. No: Duplicate headers are not allowed. The header that is returned from the origin server is overwritten by the header that is added to the response. In this example, the value No is used. You can configure this parameter based on your business requirements.

Examples

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?