All Products
Search
Document Center

CDN:Configure CORS

Last Updated:Feb 18, 2024

After you add your website to Alibaba Cloud CDN for content delivery, you can configure custom HTTP response headers to access resources from different origin servers.

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

image

CORS enabled

image

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

Example 1

If you set the Access-Control-Allow-Origin header 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 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.

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

  • If the value of the Origin header in a user request is http://example.com, POPs return Access-Control-Allow-Origin:http://example.com.

  • If the value of the Origin header in a user request is http://aliyundoc.com, POPs do not return Access-Control-Allow-Origin because the request uses HTTP and POPs respond to HTTPS requests in this case.

  • If the value of the Origin header in a user request is https://aliyundoc.com, POPs return Access-Control-Allow-Origin:https://aliyundoc.com.

  • If the value of the Origin header in a user request is http://aliyun.com, POPs do not return Access-Control-Allow-Origin because the domain names do not match.

Example 2

If you set the Access-Control-Allow-Origin parameter to a wildcard domain name, POPs check whether the value of the Origin header in a user request matches the wildcard domain name.

In the Alibaba Cloud CDN console, the response header is set to Access-Control-Allow-Origin:http://*.aliyundoc.com.

  • If the value of the Origin header in a user request is http://demo.aliyundoc.com, POPs return Access-Control-Allow-Origin:http://demo.aliyundoc.com.

  • If the value of the Origin header in a user request is http://demo.example.com, POPs do not return Access-Control-Allow-Origin because the domain names do not match.

  • If the value of the Origin header in a user request is https://demo.aliyundoc.com, POPs do not return Access-Control-Allow-Origin because the request uses HTTPS and POPs respond only to HTTP requests in this case.