Configure cross-origin resource sharing (CORS) for ApsaraVideo VOD by using custom HTTP response headers-ApsaraVideo VOD(VOD)-阿里云帮助中心

What is cross-origin resource sharing?

Cross-origin resource sharing (CORS) is a standard mechanism that allows a web page to access resources from a different origin (domain, protocol, or port) than its own. It provides a secure way to enable cross-origin data transfers. For more information, see Cross-Origin Resource Sharing (CORS).

Note

Q: What happens if CORS is not enabled on CDN by default?

By default, CDN does not enable cross-origin resource sharing (CORS). Without this configuration, browsers enforce the same-origin policy and block cross-origin requests, which prevents other websites from loading your resources.

Intermittent cross-origin errors caused by CDN caching

When a CDN node retrieves content from the origin for the first time, if the request does not contain the Origin header, OSS does not return the Access-Control-Allow-Origin response header. CDN caches this response that does not contain CORS headers (the default cache duration is determined by the cache rules).

When a subsequent cross-origin request that contains the Origin header hits this cached response, the browser reports a cross-origin error because the response does not contain the Access-Control-Allow-Origin header. Due to the randomness of cache hits, access to the same resource fails intermittently at different times.

Solution: Add the Access-Control-Allow-Origin response header in Custom HTTP Response Header under Domain Names > Cache. After the configuration, use refresh and prefetch to remove the old cached responses that do not contain CORS headers on CDN nodes, so that the newly cached responses contain the correct CORS headers.

After CDN caches a response, it no longer retrieves content from the origin to check the CORS settings of OSS. Therefore, you must configure response headers at the CDN level, rather than relying solely on the CORS rules of OSS.

Why configure cross-origin resource sharing?

Due to security restrictions, browsers typically follow the same-origin policy, which restricts requests to load and access resources from different domains, subdomains, protocols, or ports. For example, example.com cannot access resources on example.org. By configuring cross-origin resource sharing (CORS), you can set relevant response headers on the CDN server. If a request includes headers that meet the allowed rules, the server returns the corresponding HTTP response headers, which allows cross-origin resources to be loaded and accessed.

How it works

CORS configured on the origin server

With CORS configured on CDN

Enable cross-origin resource sharing

Log in to the ApsaraVideo VOD console.
In the left-side navigation pane, choose Configuration Management > CDN Configuration > Domain Names.
On the Domain Names page, find the domain name that you want to manage and click Configure.
In the left-side navigation pane for the domain name, click Cache.
Click the Custom HTTP Response Header tab.
Click Add to configure a custom HTTP response header.

Set the parameters for allowed origins and click OK.

Parameter	Example
Operation	Add
Response Header	Access-Control-Allow-Origin
Header Value	* Note The value can be set to an asterisk (``) to allow requests from any origin. If the value is not an asterisk (``), you can specify one or more IP addresses, domain names, or a mix of both. Use commas to separate multiple values. If the header value is not ``, it must start with `http://` or `https://`. You can include a port number in the header value. Wildcard domain names are supported. Important* If your business requires carrying credentials (such as cookies or session tokens) in cross-origin requests — for example, encrypted playback or authentication — you must not configure this as the wildcard ``. Instead, configure the exact domain name (for example, `https://example.com`). If `` is used while credentials are included, the browser will block the response due to security policy, and video playback will fail or return no data. This is because `Access-Control-Allow-Credentials: true` and `Access-Control-Allow-Origin: *` are mutually exclusive.
Allow Duplicates	No Note Yes: Allows duplicate headers. The CDN POP retains the header from the origin server and adds a new header with the same name. No: Prevents duplicate headers. The CDN POP overwrites the header from the origin server with the new header. This topic uses an example in which duplicates are not allowed. The actual configuration may vary depending on your environment. Important The Allow Duplicates and CORS settings are mutually exclusive. If Allow Duplicates is set to Yes, the CORS validation is disabled.
CORS	Enable Note You can configure CORS only when the Operation is set to Add and the Response Header is "Access-Control-Allow-Origin". CORS can be set to Disable or Enable. The default value is Disable. In the Off state, the CDN node does not validate the Origin header in a user's request and only responds with the configured "Access-Control-Allow-Origin" value. When Enabled, CDN nodes will perform cross-origin validation on user requests according to the following rules and respond with the "Access-Control-Allow-Origin" value based on the validation result. Cross-origin validation rules: Wildcard Match: When the value of the Response Header Access-Control-Allow-Origin is set to "", the `Access-Control-Allow-Origin:` header is always returned, regardless of whether the user request includes an `Origin` parameter or what the value of that parameter is. Exact match: Header Value is set to one or more specific origins, separated by commas (,). If the value of the "Origin" header in a request exactly matches any of the configured values, the response will include the corresponding cross-origin header. If there is no exact match, the CORS header is not included in the response. Wildcard domain name matching: If the value of the custom response header "Access-Control-Allow-Origin" is set to a wildcard domain name, the system verifies whether the Origin value in the request header matches the wildcard domain name. When enabled, if the domain name in the Header Value contains a hyphen `-`, you must escape the hyphen before you configure the value. Escape `-` as `%-`. For example: Original Header Value: `http://doc.aliyun-example.com`. Escaped Header Value: `http://doc.aliyun%-example.com`.

Set the parameters for allowed methods and click OK.

Parameter	Example
Operation	Add
Response Header	Access-Control-Allow-Methods
Header Value	GET, POST, PUT Note Use commas to separate multiple methods.
Allow Duplicates	No Note Yes: Allows duplicate headers. The CDN POP retains the header from the origin server and adds a new header with the same name. No: Prevents duplicate headers. The CDN POP overwrites the header from the origin server with the new header. This topic uses an example where duplicates are not allowed. The actual implementation may vary depending on your environment.

Configuration examples

Example 1

If the response header value for cross-origin resource sharing is set to a single value or multiple values (multiple values are separated by commas).

If the value of the "Origin" parameter in the request header exactly matches any of the configured values, the server responds with the corresponding cross-origin header.
If there is no exact match, the CORS header is not included in the response.

In the ApsaraVideo VOD console, set Access-Control-Allow-Origin to http://example.com,https://aliyundoc.com.

The Origin header of the user request is http://example.com, and the CDN Point of Presence (POP) responds with Access-Control-Allow-Origin: http://example.com.
The Origin header in the user request is https://aliyundoc.com, and the CDN node responds with Access-Control-Allow-Origin: https://aliyundoc.com.
The CDN node will not respond to a user request with the Origin header http://aliyundoc.com (due to a protocol mismatch: the user request uses HTTP, while the CDN is configured for HTTPS).
If the Origin header of a request is http://aliyun.com, the CDN POP will not respond (domain mismatch).

Example 2

If the Access-Control-Allow-Origin response header is set to a wildcard domain name, the Origin value in the request header is checked to verify that it matches the wildcard domain name.

In the ApsaraVideo VOD console, set Access-Control-Allow-Origin to http://*.aliyundoc.com.

The user request contains the Origin header http://demo.aliyundoc.com, and the CDN POP responds with Access-Control-Allow-Origin: http://demo.aliyundoc.com.
If the Origin header of a request is http://demo.example.com, the CDN POP will not respond because the domain name does not match.
The CDN node does not respond to a user request with the Origin header https://demo.aliyundoc.com because the request uses the HTTPS protocol, but the CDN is configured with the HTTP protocol.

FAQ

Why does playback fail on web browsers (Chrome/Edge) with CORS errors on .ts files?

Newer versions of browsers enforce strict CORS validation when loading .ts segments via Media Source Extensions (MSE). If the CDN does not have the Access-Control-Allow-Origin header properly configured, the browser will block the request and playback will fail.

Additionally, if you have configured the wildcard value * for Access-Control-Allow-Origin and the player request carries cookies or session credentials, the browser will reject the response. In this case, change the value from * to the exact domain name of your frontend player (for example, https://player.example.com).

Why does console preview fail or .ts file requests report CORS errors on some computers?

Check whether CORS rules have been added for the accelerated domain name. On the Domain Names page, select the target domain, and verify that the custom HTTP response headers include Access-Control-Allow-Origin with the correct value.

Why does playback fail on Android WebView but works on web/iOS after modifying Access-Control-Allow-Origin?

After modifying the Access-Control-Allow-Origin response header, you must purge the CDN cache and clear the WebView cache on the Android device for the new CORS settings to take effect. Otherwise, the app continues to use the cached response with the old headers.

Why does the test environment or a specific domain return error 4009?

Check whether Access-Control-Allow-Origin is configured to allow only the production domain while excluding the test domain. Add your test domain to the allowed origins list.

If Access-Control-Allow-Credentials is set to true, the Origin value must not be set to the wildcard *. Configure the exact origin domain (for example, https://test.example.com) instead.

Why does playback fail in WeChat Mini Programs or Official Accounts?

If hotlink protection is not enabled, you do not need to configure a Referer whitelist. However, if CORS interception still occurs, you must still configure CORS rules.

For in-app playback within WeChat Official Accounts, ensure the following:

The playback page is served over HTTPS.
The domain name has completed ICP filing.
The SSL certificate is valid.
The M3U8 playlist response returns the correct Content-Type header: application/vnd.apple.mpegurl or application/x-mpegURL.