Neste codelab, você vai aprender como a mesma origem funciona ao buscar recursos.
Configuração: buscar a página da mesma origem
A demonstração será realizada em https://same-origin-policy-fetch.glitch.me.
Esta página da Web simples usa fetch para carregar o recurso de https://same-origin-policy-fetch.glitch.me/fetch.html. Como index.html e fetch.html compartilham a mesma origem, o 200 vai aparecer na visualização em tempo real.
1. Buscar página de uma origem diferente
Tente mudar o URL de busca para https://www.google.com.
O que é exibido 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 de origem cruzada
Tente mudar o URL de busca para https://api.thecatapi.com/v1/images/search.
O que é exibido na visualização ao vivo?
O URL de busca é uma origem diferente, mas você verá o código de status 200. Por quê? Aplicativos modernos da Web geralmente solicitam recursos de origem cruzada para carregar scripts de terceiros ou consultar um endpoint de API. Para acomodar esses casos de uso, há um mecanismo chamado Compartilhamento de recursos entre origens (CORS, na sigla em inglês), que informa ao navegador que o carregamento de um recurso de origem cruzada é permitido. Consulte Compartilhar recursos de origem cruzada com segurança para saber mais sobre o CORS.