Neste codelab, confira como a mesma origem funciona ao buscar recursos.
Configurar: 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 o 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 diferentes origens
Tente mudar o URL de busca para https://www.google.com.
O que é exibido na visualização ao vivo?
O navegador deve ter bloqueado a solicitação de busca porque você solicitou um recurso de uma origem diferente. Ou seja, um invasor não consegue ler dados recursos, mesmo que tenham assumido o controle do navegador do 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?
A origem do URL de busca é diferente, mas o código de status é 200. Por quê? Aplicativos da Web modernos geralmente solicitam recursos de origem cruzada 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 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.