Neste codelab, você vai aprender 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, você verá 200 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 você vê na prévia 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 entre origens, 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 prévia ao vivo?
O URL de busca é uma origem diferente, mas o código de status 200 deve aparecer. Por quê? Os aplicativos da Web modernos geralmente solicitam recursos entre origens para carregar scripts de terceiros ou consultar um endpoint de API. Para acomodar esses casos de uso, há 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.