Alibaba Cloud CDN supports cross-origin resource sharing (CORS). You can add custom HTTP response headers to enable CORS. This topic describes how CORS works, how to configure CORS, and some use scenarios of CORS.

What is CORS?

CORS is a standard cross-origin solution that is provided by HTML5 to allow web application servers to manage cross-origin access. This solution ensures that data transmission is secure.

The following figure describes how CORS works.Principle
The following figure shows how CORS interacts with Alibaba Cloud CDN.Principle

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 pane of the domain name, click Cache.
  5. Click the Custom HTTP Response Header tab.
  6. Click Customize and set the parameters.
  7. Select Add and set Response Header to Access-Control-Allow-Origin if you want to enable CORS. Custom HTTP response header
    Note
    • By default, CORS is disabled. You can configure CORS only if Operation is set to Add and Response Header is set to Access-Control-Allow-Origin.
      • Enable: After CORS is enabled, CDN edge nodes check the Origin header of user requests based on the following rules and specify a value for Access-Control-Allow-Origin.
      • Disable: After CORS is disabled, CDN edge nodes do not check the Origin header of user requests. In this case, CDN edge nodes only return the value of Access-Control-Allow-Origin.
    • When CORS is enabled, if the domain name in the Response Header contains a hyphen -, you must escape the hyphen - to %-. Example:
      • Original response header value: http://doc.aliyun-example.com.
      • Escaped response header value: http://doc.aliyun%-example.com.

Examples

Example 1: The response header of CORS is set to one or more values that are separated by commas (,).
  • If the value of the Origin header in a user request matches a value of Access-Control-Allow-Origin, the value of Access-Control-Allow-Origin is returned.
  • If the value of the Origin header in a user request does not match a value of Access-Control-Allow-Origin, no value of Access-Control-Allow-Origin is returned.

The response header is set to Access-Control-Allow-Origin:http://example.com,https://aliyundoc.com in the Alibaba Cloud CDN console.

  • If the Origin value of a request header is http://example.com, CDN edge nodes return Access-Control-Allow-Origin:http://example.com.
  • If the Origin value of a request header is http://aliyundoc.com, CDN edge nodes do not return Access-Control-Allow-Origin because the request uses HTTPS while CDN edge nodes respond only to HTTP requests.
  • If the Origin value of a request header is http://aliyundoc.com, CDN edge nodes return Access-Control-Allow-Origin:https://aliyundoc.com.
  • If the Origin value of a request header is http://aliyun.com, CDN edge nodes do not return Access-Control-Allow-Origin because the domain names do not match.

Example 2: If the response header of CORS has a wildcard domain name configured, CDN edge nodes check whether the Origin value of a request header has a wildcard domain name that matches Access-Control-Allow-Origin.

The response header is set to Access-Control-Allow-Origin:http://*.aliyundoc.com in the Alibaba Cloud CDN console.
  • If the Origin value of a request header is http://demo.aliyundoc.com, CDN edge nodes return Access-Control-Allow-Origin:http://demo.aliyundoc.com.
  • If the Origin value of a request header is http://demo.example.com, CDN edge nodes do not return Access-Control-Allow-Origin because the domain names do not match.
  • If the Origin value of a request header is https://demo.aliyundoc.com, CDN edge nodes do not return Access-Control-Allow-Origin because the request uses HTTPS while CDN edge nodes respond only to HTTP requests.