4
respostas

Nada aparece na página da Aula 2 Criando Requisições - apenas um erro

Quando vou ativar a página e coloco inspecionar aparece o seguinte erro:

Access to script at 'file:///C:/Users/letic/OneDrive/Documentos/aluraplay-requisicoes-aula03/js/mostrarVideos.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

e as informações da página não aparecerem, já tentei abrir a página com meu código e com o da instrutora e aparece esse erro nos dois.

Alguém pode me ajudar?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 respostas

Opa Leticia, tudo bem?

O erro em questão indica haver um problema por conta da política CORS (Cross-Origin Resource Sharing) do navegador, que permite apenas solicitações entre os esquemas de protocolo http, data, isolated-app, chrome-extension, chrome, https e chrome-untrusted, o que pode estar relacionado a tentativa de acesso ao arquivo.

Deixo abaixo um artigo sobre o assunto que pode ajudar:

Recomendo desabilitar todas as extensões do navegador, ou abrir o arquivo em um navegador diferente para não precisar desabilitar as extensões que podem estar tendo conflito com essa política.

Fico à disposição.

Tenha um bom dia e bons estudos.

Olá Gabriel grata pela ajuda, ja busquei como resolver em alguns sites porém ainda não achei a solução. Como sou nova nessa área ainda não achei como resolver... desinstalei o crome e reinstalei mas vou continuar procurando fiz achei

o app https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/related?hl=en e instalei.

e apareceu isso, segue imagem do teste :

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Opa Leticia.

Como CORS se trata de uma política de segurança, mexer diretamente nele pode acarretar outros empecilhos. Sendo assim, sugiro tentar contornar o problema de uma outra forma, como utilizar a extensão do Visual Studio Code, a Live Server.

A extensão Live Server é uma ferramenta que permite visualizar as alterações em tempo real no navegador, sem a necessidade de atualizar a página manualmente. Ela simplifica o processo de visualização e atualização automática das alterações feitas em um arquivo HTML, CSS ou JavaScript em um servidor local.

Como estaremos utilizando um servidor local para acessar essas informações, e não um arquivo aberto no navegador, é possível que não sejamos barrados pela política CORS.

Ao baixar a extensão, para rodar o projeto em um servidor local utilizando a mesma, basta clicar com o botão direito do mouse no arquivo HTML que você deseja visualizar e selecionar a opção "Open with Live Server", ou "GoLive" no canto inferior do Visual Studio Code. Isso abrirá automaticamente o seu arquivo HTML no navegador e, a partir daí, sempre que você fizer alguma alteração no seu código, a página será atualizada automaticamente no navegador.

Fico à disposição.

Olá Gabriel,

Mexendo aqui em alguns sites compreendi que estava abrindo direto no navegador, mas agora consegui visualizar. Também voltei algumas aulas ateriores pra verificar...

obrigada, pelo help.