If you encounter an Access-Control-Allow-Origin error when playing FLV or M3U8 videos in a web player, you must enable cross-origin resource sharing (CORS) for your playback domain name.
Error message
The following error message is displayed:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Origin ‘http://localhost:9030‘ is therefore not allowed access.Solutions
Accelerated domain name in ApsaraVideo VOD
If your resources are in ApsaraVideo VOD and you use an accelerated domain name, you can add an HTTP response header to the domain name to allow cross-origin access.
Log on to the ApsaraVideo VOD console.
In the navigation pane on the left, under Configuration Management, click to open the Domain Names page.
On the Domain Names page, select the domain name that you want to configure, and click Configure in the Actions column.
In the navigation pane on the left, click Cache Configuration. On the Custom HTTP Response Headers tab, click Add.
Set the response header to Access-Control-Allow-Origin to specify the allowed source for cross-origin requests.
Enter a value for the response header and click OK.
NoteThe response header value can be an asterisk (*), which allows requests from any source.
If the value is not an asterisk (*), you can specify one or more IP addresses, domain names, or a combination of both. Separate them with commas (,).
If the value is not an asterisk (*), the value must include the http:// or https:// protocol.
The value can include a port number.
The value can be a wildcard domain name.
Then, add the allowed methods for the domain. Click Add. Set the response header to Access-Control-Allow-Methods and the value to POST or GET. To specify both POST and GET, separate them with a comma (,). The following figure shows an example.
If the domain name in the URL of a TS shard is different from the domain name in the M3U8 URL, you must also add the cross-origin access HTTP response header to the domain name of the TS shard.
Custom domain name in OSS
If you access OSS directly from the player, you must enable CORS for the bucket. For more information, see Configure cross-origin resource sharing.
Create a CORS rule with the following parameters.
Source: *.
Allowed Methods: Select GET, POST, PUT, DELETE, and HEAD.
Allowed Headers: *.
Exposed Headers: ETag.
This must be the first CORS rule.
The following figure shows an example.
Verify the configuration
To verify that the cross-origin settings are effective, follow these steps:
Open the developer tools in your browser. You can usually do this by pressing F12 or by right-clicking the page and selecting Inspect.
Switch to the Network tab.
Open the page that contains the cross-origin request.
In the list of network requests, find the video request and click it to view the details.
In the request details, check the Response Headers section. Confirm that it includes the
Access-Control-Allow-Originheader and that its value matches your configuration.
If the Access-Control-Allow-Origin response header is present and its value is correct, the cross-origin settings are effective.