Exemplos de configuração do CORS

Visão geral Configuração

Nesta página, mostramos exemplos de configuração para o Compartilhamento de recursos entre origens (CORS).

Ao definir uma configuração do CORS em um bucket, você permite interações entre recursos de origens diferentes, algo que normalmente é proibido para evitar comportamentos maliciosos. Para saber como estruturar uma solicitação que define ou edita uma configuração de CORS em um bucket, consulte as instruções em Usar o CORS.

Confira estes outros recursos:

Configuração básica do CORS

Digamos que você tenha um site dinâmico que os usuários possam acessar em your-example-website.appspot.com. Você tem um arquivo de imagem hospedado em um bucket do Cloud Storage chamado your-example-bucket. Você quer usar a fonte no seu site. Por isso, aplique uma configuração de CORS em your-example-bucket, que permite que os navegadores dos usuários solicitem recursos do bucket. Com base na configuração abaixo, as solicitações simuladas são válidas por uma hora, e as solicitações de navegador bem-sucedidas retornam o Content-Type do recurso na resposta.

API JSON

{
  "cors": [
    {
      "origin": ["https://your-example-website.appspot.com"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
  ]
}

API XML

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

Upload direto de arquivos (para aplicativos de página única)

Use essa configuração quando o aplicativo de front-end precisar fazer upload de arquivos diretamente para um bucket, o que exige uma operação PUT. Essa é uma necessidade comum para aplicativos de página única, em que a lógica do aplicativo reside no navegador do usuário em vez de em um servidor de back-end.

As solicitações PUT sempre acionam uma verificação de simulação.

API JSON

{
 "cors": [
    {
        "origin": ["https://www.example-website.appspot.com"],
        "method": ["PUT", "POST", "OPTIONS"],
        "responseHeader": ["Content-Type", "x-goog-resumable"],
        "maxAgeSeconds": 3600
      }
  ]
}

API XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://your-example-website.appspot.com</Origin>
    </Origins>
    <Methods>
      <Method>PUT</Method>
      <Method>POST</Method>
      <Method>OPTIONS</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
      <ResponseHeader>x-goog-resumable</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

Exemplo de código do lado do cliente

JavaScript

// Uploading a file using a Signed URL or direct PUT
await fetch(gcsSignedUrl, {
  method: 'PUT',
  body: fileBlob,
  headers: {
    'Content-Type': 'application/pdf'
  }
});

Acesso autenticado aos dados

Use essa configuração se o aplicativo enviar um token de portador ou um cabeçalho de identidadeGoogle para acessar objetos protegidos (não públicos).

API JSON

{
 "cors": [
    {
        "origin": ["https://www.example-secure-app.appspot.com"],
        "method": ["GET", "HEAD"],
        "responseHeader": ["Authorization", "Content-Type"],
        "maxAgeSeconds": 3600
      }
  ]
}

API XML

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

Permitir acesso a vários subdomínios correspondentes

Use essa configuração se você tiver vários ambientes de desenvolvimento ou de preparo que precisam de acesso ao mesmo bucket. Usar o caractere curinga * ao especificar um subdomínio permite corresponder a vários subdomínios. Por exemplo, *.example.com pode ser usado para corresponder a test.example.com e prod.example.com.

API JSON

{
 "cors": [
    {
        "origin": ["https://*.example.com"],
        "method": ["GET", "POST", "OPTIONS"],
        "responseHeader": ["Content-Type", "x-goog-resumable"],
        "maxAgeSeconds": 3600
      }
  ]
}

API XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://*.example.com</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
      <Method>POST</Method>
      <Method>OPTIONS</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
      <ResponseHeader>x-goog-resumable</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

Permitir acesso para qualquer origem

Use essa configuração para dados públicos em que a restrição não é necessária. Especificar o caractere curinga * como a origem permite solicitações de qualquer origem. Com essa configuração, as solicitações ao bucket vão falhar se o cliente definir credentials: include na solicitação.

API JSON

{
 "cors": [
    {
        "origin": ["*"],
        "method": ["GET"],
        "responseHeader": ["Content-Type"],
        "maxAgeSeconds": 1800
      }
  ]
}

API XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>*</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>1800</MaxAgeSec>
  </Cors>
</CorsConfig>

Estrutura de configuração do CORS para CLI gcloud

O comando gcloud storage buckets update --cors-file espera um arquivo que contenha apenas a lista de regras do CORS. Ao especificar uma configuração do CORS para ser definida usando a Google Cloud CLI, remova o wrapper "cors": de nível superior do arquivo JSON.

Por exemplo, este comando da CLI gcloud define uma configuração do CORS em um bucket:

gcloud storage buckets update gs://example_bucket --cors-file=example_cors_file.json

Esta é uma configuração de exemplo para example_cors_file.json que usa a estrutura correta para o comando gcloud storage buckets update --cors-file.

[
    {
      "origin": ["https://your-example-website.appspot.com"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
]

A seguir