If an "Access-Control-Allow-Origin" related error occurs or the system prompts that the resource supports cross-origin access when you use ApsaraVideo Player SDK for Web to play videos, you need to enable CORS for your playback domain. This topic describes how to configure CORS for the web player and OSS playback.
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 Custom HTTP response headers.
Log on to the ApsaraVideo VOD console.
In the System Management section of the left-side navigation pane of the ApsaraVideo VOD console, click to go to 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.
Click Cache in the left-side navigation pane, and then click Custom HTTP Response Header. Click Add.
In the response header parameters, select Access-Control-Allow-Origin to specify the allowed origin of cross-origin requests.
Enter the corresponding response header value and click Confirm.
Note
The response header value can be set to an asterisk (*), which indicates any origin.
If the response header value is not an asterisk (*), you can configure a single or multiple IP addresses, domain names, or a combination of IP addresses and domain names. Separate them with commas (,).
If the response header value is not an asterisk (*), it must include the protocol header "http://" or "https://".
Port numbers are supported.
Wildcard domain names are supported.
Then add the method value for the corresponding domain name. Click Add and select Access-Control-Allow-Methods with a value of POST or GET. If you need to add both POST and GET, separate them with a comma (,). The following figure shows an example.
Note
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.
Set the following parameters to create a CORS rule:
Source: *.
Allowed Methods: Select GET, POST, PUT, DELETE, and HEAD.
Allowed Headers: *.
Exposed Headers: ETag.
Important
Specify this rule as the first of all CORS rules.
The following figure shows an example.
Verify that CORS is enabled
To verify that CORS is enabled, perform the following steps:
Open the developer tools in your browser (usually by pressing F12 or right-clicking and selecting "Inspect").
Switch to the Network tab.
Access the page that contains cross-origin requests to trigger the requests.
Find your video request in the network request list and click it to view the details.
In the request details, check the Response Headers section to confirm whether the Access-Control-Allow-Origin response header exists and whether its value matches your configuration.
If the Access-Control-Allow-Origin response header exists and its value is correct, CORS is enabled.
Elastic Compute Service (ECS)
Lingma
