Boa tarde. Preciso de ajuda! Após finalizar os códigos, os vídeos não carregam. Já refiz duas vezes, mas não consigo encontrar o erro. Poderiam ajudar, por favor?
index.html:
<body>
<header>
<nav class="cabecalho">
<a class="logo" href="./index.html"></a>
<div class="cabecalho__pesquisar">
<input type="search" placeholder="Pesquisar" id="pesquisar" class="pesquisar__input">
<button class="pesquisar__botao">
</div>
<div class="cabecalho__icones">
<a href="./pages/enviar-video.html" class="cabecalho__videos"></a>
</div>
</nav>
</header>
<ul class="videos__container" alt="videos alura" data-lista>
</ul>
<script src="./js/mostrarVideos.js" type="module"></script>
</body>
conectaApi:
async function listaVideos (){
const conexao = await fetch ("http://localhost:3000/videos");
const conexaoConvertida = await conexao.json();
return conexaoConvertida;}
export const conectaApi = {
listaVideos}
mostrarVideos:
import { conectaApi } from "./conectaApi.js";
const lista = document.querySelector("[data-lista]");
function constroiCard (titulo, descricao, url, imagem) {
const video = document.createElement("li");
video.className = "videos__item";
video.innerHTML = `<iframe width="100%" height="72%" src="${url}"
title="${titulo}" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<div class="descricao-video">
<img src="${imagem}" alt="logo canal alura">
<h3>${titulo}</h3>
<p>${descricao}</p>
</div>`
return video;}
async function listaVideos () {
const listaApi = await conectaApi.listaVideos ();
listaApi.forEach (elemento => lista.appendChild(
constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)))}
listaVideos ();
MENSAGEM NO CONSOLE:
``` Access to script at 'file:///C:/Users/Eu/Desktop/Curso%20de%20TI/_Front%20End%20-%20Fase%203/aluraplay-requisicoes-main%20-%20APRENDENDO/js/mostrarVideos.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.Understand this errorAI
index.html:83
GET file:///C:/Users/Eu/Desktop/Curso%20de%20TI/_Front%20End%20-%20Fase%203/aluraplay-requisicoes-main%20-%20APRENDENDO/js/mostrarVideos.js net::ERR_FAILED
.