If an "Access-Control-Allow-Origin" related error occurs or the system prompts that the resource supports cross-origin access, you need to enable CORS for your playback domain. This topic describes how to enable CORS for ApsaraVideo Player SDK for Web and an OSS bucket.
Configure CORS for using the HTML5 player to play FLV and M3U8 videos
If the following error message is returned, you must enable CORS for the domain name for playback to resolve this issue:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:9030‘ is therefore not allowed access.Add HTTP headers to enable CORS. For more information, see Configure a custom HTTP response header.
Access-Control-Allow-Origin: specifies the domain name of cross-origin requests that are allowed. Set the value of the parameter to the domain name of the website from which videos are loaded. For example, if videos are loaded from the https://www.aliyundoc.com website, set the value to https://www.aliyundoc.com. The following figure shows how to configure the Access-Control-Allow-Origin parameter.
Access-Control-Allow-Methods: specifies the allowed methods of the cross-origin requests. Valid values: POST and GET. You can specify both the POST and GET methods. Separate them with a comma (,). The following figure shows how to configure the Access-Control-Allow-Methods parameter.
If the URL of a media segment file and the URL of the M3U8 video belong to different domain names, you need to configure the preceding HTTP headers for the domain name of the media segment file.
Configure CORS for playing videos that are stored in OSS
If you want the player to access the OSS bucket in which videos are stored, you need to configure CORS for the OSS bucket. For more information, see Configure CORS rules.
Configure the following parameters to create a CORS rule:
Source: Set the value to an asterisk (*).
Allow Methods: Valid values: GET, POST, PUT, DELETE, and HEAD.
Allowed Headers: Set the value to an asterisk (*).
Exposed Headers: Set the value to ETag.
Specify this rule as the first CORS rule of the OSS bucket.
The following figure shows how to configure the parameters to create a CORS rule.