Como configurar o compartilhamento de recursos entre origens (CORS)

O compartilhamento de recursos entre origens (CORS, na sigla em inglês) é um mecanismo que permite realizar interações entre recursos de origens diferentes, algo que normalmente é proibido para impedir a ocorrência de comportamentos maliciosos. Neste tópico, ensinamos como configurar o CORS em um intervalo do Cloud Storage.

Para mais informações sobre a compatibilidade do CORS no Cloud Storage, consulte Compartilhamento de recursos entre origens (CORS).

Como configurar o CORS em um intervalo

Para configurar o CORS em um intervalo, especifique as informações que identificam os tipos de solicitações a serem aceitas, como métodos HTTP e domínios de origem. Para fazer isso, use a ferramenta de linha de comando gsutil, a API XML, a API JSON ou as bibliotecas de cliente do Cloud Storage.

O exemplo a seguir ilustra como configurar o CORS no intervalo denominado example-bucket. Observe que o CORS é configurado para atender a estes requisitos:

  • Permitir solicitações originadas de example.appspot.com.
  • Permitir solicitações que usam os métodos HTTP GET, HEAD ou DELETE
  • Permitir que o cabeçalho de resposta Content-Type seja compartilhado entre origens.
  • No caso de solicitações simuladas, permitir que o navegador faça solicitações por 3.600 segundos (1 hora) antes de repetir a solicitação de simulação

gsutil

Use o comando gsutil cors para configurar o CORS em um intervalo:

gsutil cors set cors-json-file.json gs://example-bucket

Em que cors-json-file.json é um arquivo local que contém:

[
    {
      "origin": ["http://example.appspot.com"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

Também é possível usar o comando gsutil cors para retornar a configuração do CORS de um intervalo:

gsutil cors get gs://example-bucket

Bibliotecas de cliente

Para definir ou ver de maneira programática a configuração do CORS em um intervalo, use uma das bibliotecas de cliente do Cloud Storage. Use o conteúdo de referência a seguir para começar:

APIs REST

API JSON

Use o método Buckets: insert da API JSON para configurar o CORS em um novo intervalo. Como alternativa, use o método Buckets: patch para configurar o CORS em um intervalo atual. O exemplo a seguir mostra o uso do método Buckets: patch.

PATCH /storage/v1/b/example-bucket?fields=cors HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg
content-length: 132
accept: application/json
accept-encoding: gzip, deflate
content-type: application/json

{
  "location": "us-east-1",
  "storageClass": "standard",
  "cors": [
      {
          "maxAgeSeconds": "3600",
          "method": [
             "GET"
             "HEAD"
             "DELETE"
          ],
          "origin": [
             "http://example.appspot.com"
          ],
          "responseHeader":[
            "Content-Type"
         ]
      }
  ]
}

Use o método Buckets: get para ver a configuração do CORS em um intervalo:

GET https://www.googleapis.com/storage/v1/b/example-bucket
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

API XML

Use o método Definir CORS do intervalo da API XML para configurar o CORS em um intervalo.

PUT http://storage.googleapis.com/example-bucket?cors HTTP/1.1
Host: storage.googleapis.com
Content-Length: 412
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>http://example.appspot.com</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
      <Method>HEAD</Method>
      <Method>DELETE</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

Use o método Receber CORS do intervalo para ver a configuração do CORS em um intervalo:

GET http://storage.googleapis.com/example-bucket?cors HTTP/1.1
Host: storage.googleapis.com
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

Solução de problemas com solicitações do CORS

Se você enfrentar um comportamento inesperado ao acessar intervalos do Cloud Storage de uma origem diferente, siga as etapas abaixo:

  1. Use gsutil cors get no intervalo de destino para ver a configuração do CORS. Se houver várias entradas de configuração do CORS, verifique se, nas etapas abaixo, os valores da solicitação estão mapeados para valores na mesma entrada de configuração do CORS.

  2. Revise a solicitação e a resposta usando a ferramenta da sua preferência. No navegador Chrome, veja essas informações usando as ferramentas padrão para desenvolvedores:

    1. Clique no menu Ícone do menu do Chrome. na barra de ferramentas do Chrome.
    2. Selecione Mais ferramentas > Ferramentas do desenvolvedor.
    3. Clique na guia Rede.
    4. No seu aplicativo ou na linha de comando, envie a solicitação.
    5. No painel que exibe a atividade da rede, localize a solicitação.
    6. Na coluna Nome, clique no nome que corresponde à solicitação.
    7. Clique na guia Cabeçalhos ou Resposta para ver, respectivamente, os cabeçalhos ou o conteúdo da resposta.

    Se você não estiver vendo a solicitação e a resposta, é possível que o navegador tenha armazenado em cache uma tentativa de simulação de solicitação anterior que falhou. Limpar o cache de seu navegador provavelmente limpará o cache da simulação. Se isso não acontecer, defina MaxAgeSec na configuração do CORS para um valor mais baixo (o valor padrão é 1800, 30 minutos, se não for especificado). Aguarde o tempo do MaxAgeSec antigo e depois faça a solicitação novamente. Assim, será executada uma nova simulação de solicitação que buscará a nova configuração do CORS e limpará as entradas do cache. Após depurar o problema, aumente novamente o valor de MaxAgeSec para reduzir o tráfego de simulação para o intervalo.

  3. Certifique-se de que a solicitação tenha um cabeçalho Origin e que o valor do cabeçalho corresponda a pelo menos um dos valores de Origins na configuração do CORS do intervalo. É necessário que o esquema, o host e a porta dos valores se correspondam exatamente. Alguns exemplos de correspondências aceitáveis:

    • http://origin.example.com corresponde a http://origin.example.com:80 (porque 80 é a porta HTTP padrão), mas não corresponde a https://origin.example.com, http://origin.example.com:8080, http://origin.example.com:5151 ou http://sub.origin.example.com.

    • https://example.com:443 corresponde a https://example.com, mas não a http://example.com ou http://example.com:443.

    • http://localhost:8080 corresponde somente a , não a http://localhost:5555 ou http://localhost.example.com:8080.

  4. Verifique se o método HTTP da solicitação, no caso de uma solicitação simples, ou o método especificado em Access-Control-Request-Method, no caso de uma solicitação de simulação, corresponde a pelo menos um dos valores de Methods na configuração do CORS do intervalo.

  5. Se essa for uma solicitação de simulação, veja se ela inclui um ou mais cabeçalhos Access-Control-Request-Header. Em caso afirmativo, certifique-se de que cada valor de Access-Control-Request-Header corresponda a um valor ResponseHeader na configuração do CORS do intervalo. Todos os cabeçalhos nomeados em Access-Control-Request-Header precisam estar presentes na configuração do CORS para que a simulação de solicitação tenha êxito e inclua cabeçalhos do CORS na resposta.

Esta página foi útil? Conte sua opinião sobre:

Enviar comentários sobre…

Precisa de ajuda? Acesse nossa página de suporte.