If you receive an Access-Control-Allow-Origin error when playing FLV or M3U8 videos in a web player, enable CORS for the playback domain.
Error message
You may see the following error:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Origin ‘http://localhost:9030‘ is therefore not allowed access.Solutions
Scenario 1: Accelerated domain in ApsaraVideo VOD
If your videos are hosted in ApsaraVideo VOD with a CDN-accelerated domain, add an HTTP response header to allow cross-origin requests.
-
Log in to the ApsaraVideo VOD console.
-
In the left-side navigation pane, under Configuration Management, choose CDN Configuration > Domain Names.
-
Find the domain name that you want to configure and click Configure in the Actions column.
-
In the left-side navigation pane, click Cache. On the Custom HTTP Response Header tab, click Add.
-
Select Access-Control-Allow-Origin as the response header.
Set Response Header Action to Add and Response Header Value to
*. For Allow Duplicates, select Not Allowed. Ensure that Cross-Origin Verification is disabled, and then click OK. -
Enter the response header value and click OK.
Note-
Set the value to
*to allow requests from any origin. -
If the value is not
*, specify one or more IP addresses or domain names, separated by commas (,). -
If the value is not
*, it must include thehttp://orhttps://prefix. -
Port numbers are supported in the value.
-
Wildcard domain names are supported.
-
-
Click Add, select Access-Control-Allow-Methods, and set its value to POST or GET. Separate multiple methods with a comma (,).
If a TS segment's URL uses a different domain than the M3U8 URL, you must also configure CORS for the TS segment's domain.
Scenario 2: Custom domain in OSS
To access OSS resources directly from a player, enable CORS for the bucket. For detailed steps, see Set up cross-origin resource sharing.
Create a CORS rule with these settings:
-
Source: *.
-
Allowed Methods: Select GET, POST, PUT, DELETE, and HEAD.
-
Allowed Headers: *.
-
Exposed Headers: ETag.
Ensure this is the first rule in your list of CORS rules.
Set Max Age (Seconds) to 0 and leave Return Vary: Origin unchecked.
Verify the configuration
Verify your CORS configuration:
-
Open your browser's developer tools (F12).
-
Go to the Network tab.
-
Visit the page that makes the cross-origin request.
-
Find and click your video request in the network request list.
-
Check the Response Headers section and verify that the
Access-Control-Allow-Originheader is present with the expected value.
If the Access-Control-Allow-Origin header appears with the correct value, CORS is configured correctly.