Configurando CORS (Compartilhamento de Recursos entre Origem Cruzada) para o Site

O que é CORS?

Compartilhamento de Recursos entre Origem Cruzada (CORS) é um mecanismo baseado em cabeçalhos HTTP que serve para relaxar as restrições que os navegadores impõem às requisições entre diferentes origens. Em termos simples, quando uma página da web (por exemplo, uma localizada em example.com) tenta solicitar recursos de um domínio diferente (por exemplo, api.example.net), o navegador, por padrão, bloqueia essa solicitação devido à política de mesma origem. O CORS permite que o servidor adicione cabeçalhos específicos na resposta, informando ao navegador quais origens podem acessar os recursos, permitindo assim o acesso cruzado de forma segura.

Por que usar CORS?

Quando seu aplicativo front-end (por exemplo, uma SPA rodando em app.example.com) precisa obter dados de uma API back-end (por exemplo, rodando em api.example.com), você provavelmente precisará usar o CORS.

Detalhes dos Parâmetros CORS

Aqui estão alguns parâmetros comuns no CORS e seus propósitos:

1. Access-Control-Allow-Origin:

   • Propósito: Especificar quais origens estão autorizadas a acessar os recursos.
   • Valores:
     • *: permite requisições de qualquer origem (não recomendado para ambientes de produção, pois não é seguro).
     • https://example.com: permite apenas requisições de https://example.com.
     • https://example.com https://www.example.net: permite apenas requisições de https://example.com e https://www.example.net.
   • Importante: Quando a requisição possui o cabeçalho Authorization, Access-Control-Allow-Origin não pode ser *, deve ser um domínio específico, caso contrário, a solicitação cross-origin falhará.

2. Access-Control-Allow-Methods:

   • Propósito: Especificar os métodos HTTP permitidos (como GET, POST, PUT, DELETE).
   • Valores: Por exemplo: GET, POST, PUT, DELETE, OPTIONS
   • Importante: Se sua requisição incluir cabeçalhos personalizados ou usar os métodos PUT ou DELETE, você deve declarar o método OPTIONS aqui, caso contrário, o navegador enviará primeiro uma requisição prévia OPTIONS, e se a resposta dessa requisição não declarar o método OPTIONS permitido, sua solicitação falhará.

3. Access-Control-Allow-Headers:

   • Propósito: Especificar quais cabeçalhos HTTP personalizados o cliente pode usar na requisição.
   • Valores: Por exemplo: Content-Type, Authorization
   • Importante: Se sua requisição incluir cabeçalhos personalizados, você deve declarar esses cabeçalhos aqui; caso contrário, o navegador bloqueará sua solicitação.

4. Access-Control-Allow-Credentials:

   • Propósito: Se permite que as requisições cruzadas carreguem cookies ou informações de autenticação HTTP.
   • Valores: true ou false.
   • Importante: Quando definido como true, o valor de Access-Control-Allow-Origin não pode ser um curinga *.

Habilitando e Configurando CORS no ServBay

O ServBay oferece uma interface conveniente para configurar as definições de CORS do seu site. As etapas são as seguintes:

1. Selecionar o site: No menu de navegação à esquerda na interface principal do ServBay, clique na opção "Sites". Selecione o site para o qual deseja configurar o CORS a partir da lista de sites.
2. Entrar na configuração de CORS: Na interface de configuração do site, encontre a seção "CORS". O CORS estará desativado por padrão no ServBay, você precisa ativar manualmente, mudando o interruptor de "Desligado" para "Ligado".
3. Configurar Access-Control-Allow-Origin: No campo de entrada Access-Control-Allow-Origin, insira os domínios permitidos. Vários domínios podem ser separados por espaços. Por exemplo: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com.
4. Configurar Access-Control-Allow-Methods: No campo de entrada Access-Control-Allow-Methods, insira os métodos HTTP que você deseja permitir. Por exemplo: GET, POST, PUT, DELETE, OPTIONS.
5. Configurar Access-Control-Allow-Headers: No campo de entrada Access-Control-Allow-Headers, insira os cabeçalhos que você deseja permitir. Por exemplo: Content-Type, Authorization.
6. Ativar Allow-Credentials (opcional): Se você precisar permitir que as requisições cruzadas carreguem cookies ou informações de autenticação, ative o interruptor do Allow-Credentials. Esteja ciente de que, se esta opção estiver ativada, o valor de Access-Control-Allow-Origin não pode ser um curinga *.
7. Salvar configurações: Após a configuração, clique no botão "Salvar" no canto inferior direito para aplicar suas alterações.

Exemplo

De acordo com a captura de tela acima, a configuração de CORS realizada no site “ServBay Testing” é a seguinte:

• Access-Control-Allow-Origin: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: Ativado.

Isso significa que requisições dos domínios acima podem acessar os recursos do site servbay.new, e podem enviar requisições usando os métodos GET, POST, PUT, DELETE, OPTIONS, além de carregar informações nos cabeçalhos Content-Type e Authorization e cookies.

Considerações

• Segurança: Em ambientes de produção, evite usar o curinga * como valor para Access-Control-Allow-Origin.
• Cache: Os navegadores podem armazenar em cache as respostas CORS, portanto, após alterar as configurações de CORS, você pode precisar limpar o cache do navegador.
• Configuração de Códigos: Em alguns casos, além de configurar o CORS no servidor web, pode ser necessário configurá-lo no código (Laravel).
• Cenários Complexos: Para cenários cross-origin mais complexos, você pode precisar combinar CORS com outras tecnologias, como JSONP ou servidores proxy.

Seguindo as etapas acima, você pode facilmente habilitar e configurar o CORS para seu site no ServBay, garantindo que suas requisições cross-origin funcionem corretamente.

Esperamos que este documento ajude você a entender melhor e a utilizar as funcionalidades de CORS do ServBay. Se você tiver qualquer dúvida, sinta-se à vontade para perguntar.