Os navegadores podem bloquear requisições de origem cruzada para o Object Storage Service (OSS) devido à política de mesma origem, que restringe o acesso ao mesmo protocolo, domínio e porta. Por exemplo, uma página em https://www.example.com não consegue carregar recursos de https://example-bucket.oss-cn-hangzhou.aliyuncs.com/test.jpg.
Configure regras de CORS no bucket para autorizar sites específicos a acessar recursos do OSS diretamente.
Como funciona
As requisições CORS dividem-se em dois tipos: requisições simples (enviadas diretamente) e requisições preflight (que exigem verificação de autorização antes da requisição principal).
Uma requisição preflight é necessária se qualquer uma das condições abaixo for atendida:
A requisição utiliza um método diferente de
GET,HEADouPOST.A requisição usa o método
POSTcom umContent-Typediferente detext/plain,application/x-www-form-urlencodedoumultipart/form-data.A requisição inclui cabeçalhos personalizados, como
x-oss-*.
Quando um navegador envia uma requisição simples para o OSS, ocorre o seguinte processo:
O navegador adiciona um cabeçalho
Originà requisição. Esse cabeçalho especifica a origem da página solicitante, por exemplo,Origin: https://www.example.com.O OSS verifica o método HTTP e o cabeçalho
Originda requisição em relação às regras de CORS do bucket para encontrar uma correspondência. Se houver correspondência, o OSS inclui o cabeçalhoAccess-Control-Allow-Originna resposta. O valor desse cabeçalho corresponde ao valor do cabeçalhoOriginda requisição inicial.O navegador recebe a resposta e permite que a requisição prossiga apenas se o cabeçalho
Access-Control-Allow-Originestiver presente e seu valor corresponder ao domínio da página. Caso contrário, a requisição falha.
Uma requisição preflight adiciona as etapas a seguir antes do fluxo de requisição simples. Se bem-sucedida, ela segue o mesmo processo de uma requisição simples:
O navegador envia uma requisição
OPTIONSque inclui o método (Access-Control-Request-Method) e os cabeçalhos (Access-Control-Request-Headers) da requisição principal pretendida.O OSS verifica se o método e os cabeçalhos da requisição são permitidos com base na configuração de CORS. Se a requisição preflight incluir qualquer método ou cabeçalho não permitido pelas regras, a requisição falha e a requisição principal não é enviada.
Carregar recursos de site estático
Um site em https://www.example.com precisa carregar imagens, CSS e arquivos JS armazenados em um bucket do OSS.
Etapa 1: Configurar uma regra de CORS
Faça login no OSS console. Acesse a página Content Security > CORS do bucket de destino e crie uma regra conforme descrito abaixo:
|
Parameter |
Value |
Description |
|
Origin |
|
Restringe o acesso a este site. |
|
Allowed Methods |
|
|
|
Allowed Headers |
Empty |
Não obrigatório — requisições simples não disparam preflight. |
|
Exposed Headers |
|
|
|
Cached Timeout (Seconds) |
86400 |
Armazena em cache os resultados do preflight por 24 horas. |
|
Vary: Origin |
Unchecked |
Desnecessário para uma única origem específica. |
Etapa 2: Verificar a configuração
Acesse https://www.example.com e confirme se os recursos do OSS, como imagens, carregam corretamente e se não há erros de CORS no console do navegador.
Fazer upload de arquivos diretamente pelo frontend
Um usuário na página web https://app.example.com faz upload de arquivos, como avatares e documentos, diretamente para o OSS.
Etapa 1: Configurar uma regra de CORS
Faça login no OSS console. Acesse a página Content Security > CORS do bucket de destino e crie uma regra conforme descrito abaixo:
|
Parameter |
Value |
Description |
|
Origin |
|
Restringe uploads a esta aplicação autorizada. |
|
Allowed Methods |
|
|
|
Allowed Headers |
|
Uploads diretos usam assinaturas temporárias (URLs pré-assinadas) em vez de um cabeçalho |
|
Exposed Headers |
|
|
|
Cached Timeout (Seconds) |
600 |
Um cache de 10 minutos equilibra a redução de preflights com atualizações rápidas de configuração. |
|
Vary: Origin |
Checked |
Evita poluição de cache do CDN em possíveis implantações multidomínio. |
Etapa 2: Verificar a configuração
Execute uma operação de upload na página https://app.example.com e confirme se o arquivo foi enviado com sucesso para o OSS e se não há erros de CORS no console do navegador.
Suporte a múltiplos ambientes
Vários subdomínios para desenvolvimento, teste e produção, como dev.example.com e app.example.com, precisam acessar os mesmos recursos do OSS.
Etapa 1: Configurar uma regra de CORS
Faça login no OSS console. Acesse a página Content Security > CORS do bucket de destino e crie uma regra conforme descrito abaixo:
|
Parameter |
Value |
Description |
|
Origin |
|
O curinga |
|
Allowed Methods |
|
Suporta leitura e upload em todos os ambientes. |
|
Allowed Headers |
|
O curinga |
|
Exposed Headers |
|
Suporta tanto a validação de download quanto o feedback de resultado de upload. |
|
Cached Timeout (Seconds) |
3600 |
Um cache de 1 hora equilibra desempenho com flexibilidade para depuração. |
|
Vary: Origin |
Checked |
Obrigatório. Instrui o CDN a armazenar respostas em cache por |
Etapa 2: Verificar a configuração
Realize testes de acesso ou upload tanto em https://dev.example.com quanto em https://app.example.com para confirmar se todas as operações foram bem-sucedidas.
Fazer chamadas estilo API com autenticação
Uma aplicação frontend em https://api.example.com precisa acessar recursos protegidos do OSS incluindo cabeçalhos personalizados como Authorization.
Etapa 1: Configurar uma regra de CORS
Faça login no OSS console. No bucket de destino, acesse a página Content Security > CORS e crie uma regra conforme descrito abaixo:
|
Parameter |
Value |
Description |
|
Origin |
|
Para requisições com informações de autenticação, a origem deve ser um domínio preciso e confiável. |
|
Allowed Methods |
|
Suporta leitura, atualização e exclusão de recursos privados. |
|
Allowed Headers |
|
Não use |
|
Exposed Headers |
|
Fornece um identificador de verificação para operações bem-sucedidas e um ID para solução de problemas. |
|
Cached Timeout (Seconds) |
600 |
Um cache mais curto (10 minutos) garante que alterações na política de segurança sejam aplicadas rapidamente. |
|
Vary: Origin |
Selecione |
Garante que o CDN armazene respostas em cache separadamente por origem. |
Etapa 2: Verificar a configuração
Inicie uma requisição com um cabeçalho Authorization a partir da página https://api.example.com e confirme se você consegue acessar o recurso protegido do OSS.
Aplicar em produção
Melhores práticas de segurança
Siga o princípio do menor privilégio.
Configure Origin (AllowedOrigin) com precisão: Evite definir
*paraSources, a menos que seu bucket seja totalmente público. Especifique domínios exatos, comohttps://www.example.com.Restrinja Allowed Methods: Exponha apenas os métodos HTTP necessários à sua aplicação. Para sites somente leitura, configure apenas
GETeHEAD.Especifique Allowed Headers explicitamente: Para requisições autenticadas (com cabeçalho
Authorization), não use*. Liste todos os cabeçalhos de requisição necessários explicitamente.
Melhores práticas de desempenho
Otimize o cache de preflight: Um valor razoável para
MaxAgeSeconds, como86400segundos (24 horas), reduz significativamente as requisições preflight, diminuindo a latência e o custo.Avalie o impacto de
Vary: Origin: AtivarVary: Originresolve problemas de envenenamento de cache, mas aumenta a complexidade do cache do CDN. Isso pode reduzir a taxa de acerto do cache e aumentar o tráfego de retorno à origem (custo e latência adicionais). Ative essa opção somente após avaliar seus padrões de tráfego.
Aceleração via CDN
Se o seu bucket for acelerado pelo Alibaba Cloud CDN e acessado por meio de um domínio CDN, as requisições de origem cruzada chegarão primeiro a um Ponto de Presença (PoP) do CDN. Configure as regras de CORS no console do CDN, e não no console do OSS. A configuração de CORS no OSS aplica-se apenas a requisições feitas diretamente ao domínio de origem do OSS. Para obter detalhes, consulte Configurar compartilhamento de recursos de origem cruzada.
Parâmetros das regras de CORS
É possível configurar até 20 regras de CORS para cada bucket. O OSS avalia as regras sequencialmente, de cima para baixo, e aplica a primeira que corresponder à requisição. Após encontrar uma correspondência, o OSS não verifica as regras subsequentes.
|
Parameter |
Required |
Description |
|
Origin (AllowedOrigin) |
Yes |
Especifica os sites (domínios de origem) que têm permissão para fazer requisições de origem cruzada aos recursos do OSS.
|
|
Allowed Methods (AllowedMethod) |
Yes |
Especifica os métodos HTTP permitidos.
|
|
Allowed Headers (AllowedHeader) |
No |
Aplica-se a requisições preflight e determina quais cabeçalhos HTTP podem ser incluídos na requisição real.
|
|
Exposed Headers (ExposeHeader) |
No |
Especifica quais cabeçalhos de resposta do OSS estão acessíveis ao JavaScript no lado do cliente.
|
|
Cached Timeout (MaxAgeSeconds) |
No |
Especifica o tempo, em segundos, durante o qual um navegador pode armazenar em cache o resultado de uma requisição
|
|
Vary: Origin |
No |
Determina se o cabeçalho de resposta HTTP
Importante
Ativar esta opção pode diminuir a taxa de acerto do cache do CDN. |
FAQ
Erro: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Esse erro geralmente significa que o navegador armazenou em cache uma resposta antiga sem cabeçalhos CORS ou que nenhuma regra de CORS corresponde à requisição recebida.
Limpe o cache do navegador e teste novamente. Se o erro persistir, verifique suas regras de CORS:
Faça login no OSS console.
Clique em Buckets e, em seguida, clique no nome do bucket de destino.
No painel de navegação à esquerda, escolha Content Security > CORS.
Na página CORS, clique em Create Rule.
No painel Create CORS Rule, defina Origin como
*, selecione todos os Allowed Methods, defina Allowed Headers como*, defina Exposed Headers como ETag e x-oss-request-id, defina Cache Timeout (Seconds) como 0, selecione Vary: Origin e clique em OK.-
Se o problema persistir, faça login em qualquer servidor e execute o comando a seguir para visualizar os cabeçalhos da requisição de origem cruzada.
curl -v -o output_file.txt -H 'Origin:[$URL2]' '[$URL1]'Nota[URL1] é a URL do recurso do OSS solicitado.
[URL2] é o endereço de origem configurado na regra de CORS.
O sistema exibe uma saída semelhante à seguinte.

-
Se a resposta incluir um cabeçalho CORS correspondente, o problema provavelmente é cache do navegador ou da rede. Uma requisição anterior sem CORS pode ter sido armazenada em cache localmente, e uma requisição subsequente de origem cruzada buscou essa resposta em cache em vez de obter uma nova do servidor. Tente as seguintes soluções:
Pressione Ctrl+F5 no navegador para limpar o cache e teste se o problema persiste.
-
Defina Cached-Seconds como 0 na regra de CORS. Isso força cada requisição a buscar novamente a autorização CORS no servidor.
NotaVocê pode definir o
cache-controlde um objeto comono-cacheao fazer o upload dele. Para objetos já enviados, use o ossutil para alterar essa configuração. Para obter mais informações, consulte set-meta (Gerenciar metadados de objeto). Use o CDN para acelerar o OSS, garantindo que todas as requisições servidas pelo CDN incluam cabeçalhos CORS.
-
Se a resposta contiver dois cabeçalhos CORS ou um cabeçalho que não corresponda à sua configuração do OSS, o problema provavelmente é causado pelo uso do CDN para acelerar o OSS:
Faça login no CDN console e desative temporariamente a aceleração do CDN para o nome de domínio a fim de confirmar que o problema de origem cruzada foi resolvido.
Após a confirmação, clique no nome de domínio específico e acesse Cache Configuration > Node HTTP Response Header.
Defina cabeçalhos de resposta HTTP personalizados conforme necessário.
Se o problema de CORS ainda não for resolvido, consulte Erros comuns e soluções para CORS no OSS para obter mais instruções de solução de problemas.
Erro: The 'Access-Control-Allow-Origin' header has a value '...' that is not equal to the supplied origin.
O servidor retornou um cabeçalho Access-Control-Allow-Origin, mas seu valor não corresponde ao Origin da requisição. Isso geralmente é um problema de cache — um navegador ou CDN armazena a resposta para um domínio e a serve para outro.
Ative a opção Vary: Origin na sua regra de CORS para evitar conflitos de cache entre sites diferentes ou limpe o cache do navegador antes de tentar novamente.
Erro: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
Esse erro ocorre porque o frontend enviou uma requisição com credenciais (Access-Control-Allow-Credentials é True), mas Access-Control-Allow-Origin está definido como *. Os navegadores proíbem essa combinação para evitar que qualquer site acesse dados confidenciais, como cookies ou tokens de Authorization.
Se você precisar de credenciais, altere
Sourcesde*para um domínio específico (por exemplo,https://example.com).Se não precisar de credenciais, defina
xhr.withCredentialscomofalseno código do frontend e garanta queAccess-Control-Allow-Credentialssejafalseno servidor.
Como melhorar o carregamento lento de origem cruzada a partir do OSS?
A velocidade de carregamento de origem cruzada depende da latência da rede entre o cliente e o bucket do OSS. Uma requisição de origem cruzada inclui um cabeçalho Origin. Para acessos de longa distância (por exemplo, China (Hong Kong) para a China continental), use um endpoint de Transfer Acceleration para otimizar o caminho da rede.
O Transfer Acceleration otimiza os caminhos de rede para melhorar as velocidades globais de transferência de dados.