Cross-origin resource sharing (CORS) is a standard cross-origin solution provided by HTML5 to allow web application servers to control cross-origin access, which ensures the security of data transmission across origins.

Background information

Object Storage Service (OSS) provides CORS over HTML5 to enable cross-origin access. When OSS receives a cross-origin request (or an OPTIONS request) sent to a bucket, OSS reads the CORS rules of the bucket and checks the relevant permissions. OSS matches the request with the rules one by one. When OSS finds the first match, OSS returns a corresponding header in the response. If no match is found, OSS does not include CORS headers in the response.

When you configure CORS rules, take note of the following items:

  • You can configure up to 10 CORS rules for a bucket.
  • To implement CORS when Alibaba Cloud Content Delivery Network (CDN) is activated, you must configure CORS rules in the CDN console. For more information, visit Configure CORS for Alibaba Cloud CDN.

For more information about CORS, see Configure CORS in OSS Developer Guide.

Procedure

  1. Log on to the OSS console.
  2. Click Buckets, and then click the name of the target bucket.
  3. Choose Access Control > Cross-Origin Resource Sharing (CORS). In the Cross-Origin Resource Sharing (CORS) section, click Configure.
  4. Click Create Rule. In the Create Rule panel, configure the parameters. The following table describes the parameters.
    Parameter Required Description
    Sources Yes Specifies the sources from which you want to allow cross-origin requests. When you configure the sources, take note of the following rules:
    • You can configure multiple rules for sources. Separate multiple rules with line feeds.
    • The domain names must include the transfer protocol, such as HTTP or HTTPS.
    • Asterisks (*) are supported as wildcards. Each rule can contain up to one asterisk (*).
    • A domain name must contain the port number if the domain name does not use the default port. Example: https://www.example.com:8080.
    The following examples show how to configure domain names:
    • To match a specified domain name, enter the full domain name. Example: https://www.example.com.
    • To match second-level domains, use an asterisk (*) as a wildcard in the domain name. Example: https://*.example.com.
    • To match all domain names, enter only an asterisk (*) as the wildcard.
    Allowed Methods Yes Specifies the cross-origin request methods that are allowed.
    Allowed Headers No Specifies the response headers for the allowed cross-origin requests. When you configure the headers, take note of the following rules:
    • This parameter is in the key:value format and case-insensitive. Example: content-type:text/plain.
    • You can configure multiple rules for headers. Separate multiple rules with line feeds.
    • Each rule can contain up to one asterisk (*) as the wildcard. Set this parameter to an asterisk (*) if you do not have special requirements.
    Exposed Headers No Specifies the response headers for allowed access requests from applications, such as an XMLHttpRequest object in JavaScript. Exposed headers cannot contain asterisks (*).
    Cache Timeout (Seconds) No Specifies the time the browser can cache the response to a preflight (OPTIONS) request for a specific resource. Unit: seconds.
    Vary: Origin Origin No Specifies whether to return the Vary: Origin header.

    If CORS and non-CORS requests are sent to OSS, or if the Origin header has multiple possible values, we recommend that you select the Vary: Origin header to avoid errors in the local cache.

    Notice If you select Vary: Origin, access by using the browser or Content Delivery Network (CDN) back-to-origin requests may increase.

    For more information about the parameters, see PutBucketCors.

  5. Click OK.