I'm currently building a small local website for my company. All files are stored on our server and you can access the site just by opening up the index.html (the URL would be something like "X:/folder/subfolder/index.html").
The website mostly contains images, pdf's, and tables (it's kind of a database for company internal knowledge). All of the information for the tables are stored in multiple JSON-files and I want to read those files with Javascript and display their content in the html-file.
I tried everthing with the Liveserver in Visual Studio Code and it worked perfectly fine, but when I open up the actual html file in Firefox/Chrome it will show me an Cross-Origin Error "...Same-Origin-Policy blocked reading file...bla bla bla..."
Is there a way to access those files?
index.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>
main.js
window.onload = function() {
JsonReader("../data.json");
}
function JsonReader(jsonPath) {
fetch(jsonPath)
.then((response) => response.json())
.then(function(jsonData) {
console.log(jsonData)
});
}
data.json
{
"key-1": "value-1",
"key-2": "value-2",
"key-3": "value-3",
"key-4": "value-4",
"key-5": "value-5"
}