Se você receber um erro de Access-Control-Allow-Origin ao reproduzir vídeos FLV ou M3U8 em um player web, ative o CORS para o domínio de reprodução.
Mensagem de erro
A seguinte mensagem de erro pode ser exibida:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Origin ‘http://localhost:9030‘ is therefore not allowed access.
Soluções
Cenário 1: Domínio acelerado no ApsaraVideo VOD
Quando seus vídeos estiverem hospedados no ApsaraVideo VOD com um domínio acelerado por CDN, adicione um cabeçalho de resposta HTTP para permitir requisições cross-origin.
Faça login no console do ApsaraVideo VOD.
No painel de navegação à esquerda, em Configuration Management, escolha CDN Configuration > Domain Names.
-
Localize o nome de domínio que deseja configurar e clique em Configure na coluna Actions.
No painel de navegação à esquerda, clique em Cache. Na aba Custom HTTP Response Header, clique em Add.
-
Selecione Access-Control-Allow-Origin como cabeçalho de resposta.
Defina Response Header Action como Add e Response Header Value como
*. Para Allow Duplicates, selecione Not Allowed. Verifique se Cross-Origin Verification está desativado e clique em OK. -
Insira o valor do cabeçalho de resposta e clique em OK.
NotaUse o valor
*para permitir requisições de qualquer origem.Caso o valor não seja
*, especifique um ou mais endereços IP ou nomes de domínio, separados por vírgulas (,).Valores diferentes de
*devem incluir o prefixohttp://ouhttps://.O valor aceita números de porta.
Nomes de domínio com curinga também são suportados.
Clique em Add, selecione Access-Control-Allow-Methods e defina seu valor como POST ou GET. Separe múltiplos métodos com vírgula (,).
Se a URL de um segmento TS utilizar um domínio diferente da URL do M3U8, configure o CORS também para o domínio do segmento TS.
Cenário 2: Domínio personalizado no OSS
Para acessar recursos do OSS diretamente a partir de um player, ative o CORS no bucket. Para obter instruções detalhadas, consulte Configurar compartilhamento de recursos cross-origin.
Crie uma regra de CORS com as seguintes configurações:
Source: *.
Allowed Methods: Selecione GET, POST, PUT, DELETE e HEAD.
Allowed Headers: *.
Exposed Headers: ETag.
Garanta que esta seja a primeira regra na sua lista de regras de CORS.
Defina Max Age (Seconds) como 0 e deixe Return Vary: Origin desmarcado.
Verificar a configuração
Valide sua configuração de CORS seguindo estes passos:
Abra as ferramentas de desenvolvedor do navegador (F12).
Acesse a aba Network.
Visite a página que realiza a requisição cross-origin.
Localize e clique em a requisição do vídeo na lista de requisições de rede.
Inspecione a seção Response Headers e confirme se o cabeçalho
Access-Control-Allow-Originestá presente com o valor esperado.
A presença do cabeçalho Access-Control-Allow-Origin com o valor correto indica que o CORS foi configurado adequadamente.