He estado tratando de acceder a un archivo json local en javaScript usando fetch (como se muestra a continuación).

 fetch('./js/data.json') .then(response => response.json()) .then((data) => { console.log(data); }) .then((error) => { console.log(error); });

Descubrí a partir de esto que no puedo acceder al archivo json localmente y no acceder a él desde un servidor https en localhost.

Configuré esto usando ngrok.

 fetch('https://a9f8-86-133-120-217.ngrok.io/js/data.json', { method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, }) .then(response => response.json()) .then((data) => { console.log(data); }) .then((error) => { console.log(error); });

Cuando ahora ejecuto el código, obtengo los siguientes errores.

[Error] La respuesta de verificación previa no es exitosa. Código de estado: 501

[Error] Fetch API no puede cargar https://a9f8-86-133-120-217.ngrok.io/js/data.json debido a comprobaciones de control de acceso.

Después de investigar un poco, descubrí que esto se debía a un trabajo llamado cors.

Luego agregué mode: 'no-cors' a mi código. Esto significaba que el archivo JSON se estaba recuperando pero estaba generando más errores.

Rechazo de promesa no controlado: error de sintaxis: la cadena no coincide con el patrón esperado.

El error es de la siguiente línea.

 .then(response => response.json())

Cuando elimino 'Content-Type': 'application/json', aparece el siguiente error.

El origen nulo no está permitido por Access-Control-Allow-Origin. Código de estado: 200

He estado tratando de arreglar esto durante unas horas, pero no he tenido suerte.

Siento que esto es algo tan simple que me estoy perdiendo.