O acesso do Origin 'https://example.com' foi bloqueado mesmo que eu tenha permitido 'https://example.com/'

Ao tentar acessar um recurso de origem cruzada, os desenvolvedores geralmente encontram problemas relacionados ao cabeçalho Access-Control-Allow-Origin. A chave para resolver esses problemas está na compreensão do significado preciso de "origem" no contexto do protocolo CORS.

O conceito de origem no CORS

Em CORS, uma origem é uma combinação de esquema, host (domínio) e porta. É importante ressaltar que não inclui um caminho. Portanto, as duas origens a seguir são consideradas distintas:

• https://example.com
• https://example.com/path/to/resource

O problema: barras finais nas origens

O problema neste caso específico surge de um mal-entendido da definição de origem. Especificamente, a barra final na origem permitida não é permitida de acordo com as especificações do protocolo CORS. Como resultado, o cabeçalho de origem enviado pelo navegador (sem a barra final) não corresponde à origem permitida configurada no servidor.

Solução: remover a barra final da origem permitida

Para resolver esse problema, basta remover a barra final do valor de origem permitido em sua configuração CORS. Nesse caso, a origem correta permitida seria:

• https://googledocs-clone-sbayrak.netlify.app

Com esta modificação, o cabeçalho de origem do navegador corresponderá à origem permitida e o CORS será permitido com sucesso.