[Dúvida] o acesso do script esta bloqueado

***arquivo conexaoAPI.js

async function listaVideos(){
    const conexao = await fetch("http://localhost:3000/videos");
    const conexaoConvertida = await conexao.json();

    return conexaoConvertida;

}

export const conectaAPI = {
    listaVideos
}

**arquivo mostrarVideos.js

import { conectaAPI } from "./conexaoAPI";
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)
    ))
}
console.log(listaVideos);
listaVideos();

Opa Ana, tudo certo?

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.

Em um servidor local, o JavaScript pode ser executado sem problemas. No entanto, ao abrir o arquivo HTML diretamente em um navegador, algumas funcionalidades podem não funcionar corretamente devido às restrições de segurança do navegador.

Portanto, é recomendável utilizar um servidor local durante o desenvolvimento do seu projeto, como o fornecido pela extensão do Visual Studio Code, o Live Server, para garantir o correto funcionamento do JavaScript. Se você estiver enfrentando problemas ao executar seu código sem um servidor local, sugiro experimentar o Live Server ou outra ferramenta semelhante para ver se o problema é solucionado.

Agradeço sua contribuição ao trazer essa questão para o fórum e compartilhar sua experiência.

Reforço que em caso de qualquer dúvida, me coloco à disposição! Bons estudos!

Mas há outra maneira de fazer sem a necessidade do Live Server?

Opa Ana.

Como o problema não ocorre quando estamos hosteando nossa página, você pode utilizar outros método de host que mantenha a conexão entre o projeto principal e a API, porém, para acompanhar o curso recomendo utilizar a ferramenta live server, dessa forma evitará problemas de ambiente que possam surgir.

Fico à disposição.

Tenha um bom dia e bons estudos.