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 web pages 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 requested resources can be accessed and loaded even from a different origin.

How CORS works

CORS not enabled

CORS enabled

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. You can configure one or more IP addresses, domain names, or combinations of IP addresses and domain names. Separate multiple values with commas (,). If you do not use an asterisk (*) as a wildcard character for this header, 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. In this example, the value No is used. You can configure this parameter based on your business requirements. Important The Allow Duplicates and CORS settings are mutually exclusive. If you set Allow Duplicates to Yes, the setting of Yes 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. Exact match: You can specify one or more values for the Access-Control-Allow-Origin header. Separate multiple values with commas (,). 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. 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 %-. Example: 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 specify GET, POST, and PUT at the same time, separate the values 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