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 data transmission security. 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 on the CDN server. If a request to access CDN resources carries headers that comply with the allowed rules, cross-origin resources can be loaded and accessed.

How CORS works

CORS disabled

1. A client sends a request for http://example.com/index.html to example.com.

2. example.com returns the index.html file to the client. The file URL contains the URL to a resource from another origin server: http://example.org/image_01.png.

3. The client sends a request for http://example.org/image_01.png to example.org.

4. example.org returns a cross-origin header, such as Access-Control-Allow-Origin: *.

5. The client receives the response and the browser checks the header value. The header value is an asterisk (*), which indicates that cross-origin requests from all origins are allowed. Then, the browser displays the response.

CORS enabled

1. A client sends a request for http://example.com/index.html to CDN.

2. CDN returns the index.html file to the client. The file URL contains the URL to a resource from another origin server: http://example.org/image_01.png.

3. The client sends a request for http://example.org/image_01.png to CDN. The request includes the Origin:http://example.com header.

4. CDN receives the request and then compares the value of the Origin header in the request with the configured value of Access-Control-Allow-Origin. You can specify one or more values, or a wildcard domain name for Access-Control-Allow-Origin. Access-Control-Allow-Origin is returned to the client only if the preceding header values match.

5. CDN returns a cross-origin header, such as Access-Control-Allow-Origin:http://example.com, to the client.

6. The client receives the response and the browser checks the header value. The header value is http://example.com, which indicates that cross-origin requests from http://example.com are allowed. Then, the browser displays the response.

Usage notes

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

• If the origin server is an on-premises server or an Elastic Compute Service (ECS) instance, we recommend that you separate dynamic content from static content. This way, the delivery of static content is accelerated by CDN. The CORS settings in the CDN console 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 Modify Outgoing Request Header tab.

6. Click Customize to configure HTTP response headers.

7. Configure the parameters to specify the allowed origins for cross-origin requests, and then click OK.

   

   The following table describes the parameters.

   Parameter	Description	Example
   Operation	You must set this parameter to Add to use the CORS feature.	Add
   Response Header	You must set this parameter to Access-Control-Allow-Origin to use the CORS feature.	Access-Control-Allow-Origin
   Header Value	CORS disabled: You can only configure a wildcard or a single specified origin. Wildcard (*): A wildcard is configured, indicating that resources can be accessed from all origins. Single specified origin: A single origin (domain name) is specified, indicating that resources can be accessed only from the specified origin. CORS enabled: You can configure a wildcard, a single specified origin, multiple specified origins, and wildcard domain names. Wildcard (*): A wildcard is configured, indicating that resources can be accessed from all origins. Single specified origin: A single origin (domain name) is specified, indicating that resources can be accessed only from the specified origin. Multiple specified origins: Multiple origins (domain names) are specified and separated with commas (,), indicating that resources can be accessed from origins within the specified range. Wildcard domain names: A wildcard domain name is configured, indicating that resources can be accessed from all origins that match the specified wildcard domain name.	* http://www.aliyun.com https://aliyun.com,http://www.aliyun.com http://*.aliyun.com
   Allow Duplicates	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, the setting of CORS becomes invalid.	No
   CORS	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: CDN POPs do not check the Origin header in user requests. In this case, POPs return the configured value of Access-Control-Allow-Origin. Enable: CDN 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 %-. Examples: Original response header value: http://doc.aliyun-example.com. Escaped response header value: http://doc.aliyun%-example.com.	Enable

8. Configure the parameters to specify the allowed origins for cross-origin requests, and then click OK.

   

   The following table describes the parameters.

   Parameter	Description	Example
   Operation	You must set this parameter to Add.	Add
   Response Header	You must set this parameter to Access-Control-Allow-Methods.	Access-Control-Allow-Methods
   Header Value	Valid values: GET, POST, and PUT. If you add GET, POST, and PUT at the same time, separate them with commas (,).	GET
   Allow Duplicates	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.	No

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?