Neste codelab, saiba como a mesma origem funciona ao buscar recursos.
Configuração: buscar página da mesma origem
A demonstração está hospedada em https://same-origin-policy-fetch.glitch.me.
Esta página da Web simples usa fetch para carregar recursos de https://same-origin-policy-fetch.glitch.me/fetch.html. Como index.html e fetch.html compartilham a mesma origem, 200 vai aparecer na visualização ao vivo.
1. Buscar página de uma origem diferente
Tente mudar o URL de busca para https://www.google.com.
O que você vê na visualização ao vivo?
O navegador deveria ter bloqueado a solicitação de busca porque você solicitou um recurso de uma origem diferente. Isso significa que um invasor não pode ler recursos de origem cruzada, mesmo que tenha assumido o controle do navegador de um usuário.
2. Buscar um recurso entre origens
Tente mudar o URL de busca para https://api.thecatapi.com/v1/images/search.
O que você vê na visualização ao vivo?
O URL de busca é uma origem diferente, mas você vai encontrar o código de status 200. Por quê? Os aplicativos da Web modernos geralmente solicitam recursos de várias origens para carregar scripts de terceiros ou consultar um endpoint de API. Para acomodar esses casos de uso, existe um mecanismo chamado CORS (Compartilhamento de recursos entre origens) para informar ao navegador que o carregamento de um recurso entre origens é permitido. Consulte Compartilhar recursos entre origens com segurança para saber mais sobre o CORS.