Actualmente estoy construyendo un pequeño sitio web local para mi empresa. Todos los archivos se almacenan en nuestro servidor y puede acceder al sitio simplemente abriendo index.html (la URL sería algo así como "X:/carpeta/subcarpeta/index.html").
El sitio web contiene principalmente imágenes, archivos PDF y tablas (es una especie de base de datos para el conocimiento interno de la empresa). Toda la información de las tablas se almacena en varios archivos JSON y quiero leer esos archivos con Javascript y mostrar su contenido en el archivo html.
Intenté todo con Liveserver en Visual Studio Code y funcionó perfectamente bien, pero cuando abro el archivo html real en Firefox/Chrome me mostrará un error de origen cruzado "... Misma política de origen bloqueó el archivo de lectura ...bla bla bla..."
¿Hay alguna manera de acceder a esos archivos?
índice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script defer src="main.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <h1>JSON Reader</h1> </body> </html>principal.js
window.onload = function() { JsonReader("../data.json"); } function JsonReader(jsonPath) { fetch(jsonPath) .then((response) => response.json()) .then(function(jsonData) { console.log(jsonData) }); }datos.json
{ "key-1": "value-1", "key-2": "value-2", "key-3": "value-3", "key-4": "value-4", "key-5": "value-5" }