JavaScript 如何引用本地 JSON 文件?详细指南
在 Web 开发中,JSON(JavaScript Object Notation)因其轻量级、易读的格式,常被用作数据交换的载体,有时我们需要在 JavaScript 中引用本地的 JSON 文件(如配置文件、静态数据等),但直接通过 file:// 协议访问本地文件会遇到跨域或权限问题,本文将介绍几种在 JavaScript 中正确引用本地 JSON 文件的方法,涵盖不同场景下的解决方案。
直接通过 file:// 协议访问(不推荐,仅限本地调试)
如果只是本地临时调试(如直接打开 HTML 文件),可以通过 file:// 协议直接读取本地 JSON 文件,但注意:现代浏览器出于安全考虑,会阻止 file:// 协议下的跨域请求,且此方法无法在生产环境(如 Web 服务器)中使用。
示例代码:
假设项目结构如下:
project/
├── data.json
└── index.html
此方法仅适用于极简单的本地测试,实际开发中不推荐。 通过本地 Web 服务器(如  项目结构与之前一致, 如果项目使用 ES6 模块(如通过 Vite、Webpack 等构建工具打包),可以直接通过  项目结构: 通过以上方法,你可以根据项目需求灵活选择合适的方式在 JavaScript 中引用本地 JSON 文件,确保开发效率和代码兼容性。data.json
{
  "name": "张三",
  "age": 25,
  "hobbies": ["阅读", "编程"]
}
index.html 中通过 fetch 读取:<script>
  fetch('file:///path/to/your/project/data.json')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => {
      console.log('读取到的数据:', data);
    })
    .catch(error => {
      console.error('读取 JSON 文件出错:', error);
    });
</script>
问题:
Access to fetch at 'file:///...' from origin 'null' has been blocked by CORS policy(跨域限制)。通过 Web 服务器加载(推荐,兼容生产环境)
原理:
http-server、Live Server 等)启动项目,使 JSON 文件通过 http:// 或 https:// 协议访问,避免跨域问题,这是最常用且兼容性最好的方法。使用 
Live Server(VS Code 插件,适合前端开发者)
Live Server 插件。index.html,选择 Open with Live Server(默认会在浏览器中通过 http://127.0.0.1:5500 打开)。使用 
http-server(Node.js 轻量级服务器)
http-server:npm install -g http-server
http-server
http://127.0.0.1:8080)。示例代码(服务器环境下):
index.html 中通过 fetch 读取:<script>
  fetch('./data.json')  // 相对路径,基于当前 HTML 文件的 URL
    .then(response => response.json())
    .then(data => {
      console.log('读取到的数据:', data);
      // 使用数据
      document.getElementById('name').textContent = data.name;
    })
    .catch(error => console.error('读取失败:', error));
</script>
<!-- 在页面中展示数据 -->
<div>
  <p>姓名:<span id="name"></span></p>
  <p>年龄:<span id="age"></span></p>
</div>
优势:
通过 
import 语句引入(ES6 模块,适合现代前端项目)import 语句引入 JSON 文件,无需 fetch 请求。前提:
<script type="module">)。示例代码:
project/
├── data.json
└── index.htmlindex.html:<script type="module">
  // 直接导入 JSON 文件,会自动解析为 JavaScript 对象
  import data from './data.json';
  console.log('导入的数据:', data);
  document.getElementById('name').textContent = data.name;
</script>
注意:
http:// 或 https:// 加载,无法在 file:// 协议下运行)。module 类型支持。通过 
XMLHttpRequest(传统方法,兼容旧浏览器)fetch 是 ES6 引入的现代 API,对于需要兼容旧浏览器(如 IE11)的场景,可以使用 XMLHttpRequest(XHR)。示例代码:
<script>
  const xhr = new XMLHttpRequest();
  xhr.open('GET', './data.json', true);  // true 表示异步请求
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      console.log('读取到的数据:', data);
      document.getElementById('name').textContent = data.name;
    } else if (xhr.readyState === 4) {
      console.error('请求失败,状态码:', xhr.status);
    }
  };
  xhr.send();
</script>
特点:
fetch 繁琐,推荐仅在需要兼容旧环境时使用。如何选择合适的方法?
 
方法 
适用场景 
优点 
缺点 
 
file:// 协议仅本地临时调试(不推荐) 
无需服务器 
跨域限制、路径问题、无法生产 
 
Web 服务器 +  
fetch推荐(本地开发/生产环境) 
兼容性好、无跨域、支持相对路径 
需启动服务器 
 
import 语句ES6 模块项目(如 Vite/Webpack) 
代码简洁、直接导入 
需服务器支持、构建工具配置 
 
XMLHttpRequest兼容旧浏览器(IE11 等) 
兼容性强 
代码繁琐、回调地狱 
最佳实践建议:
Live Server(VS Code 插件)或 http-server 启动项目,通过 fetch 读取 JSON 文件。import 导入 JSON 文件。XMLHttpRequest 或通过构建工具转译代码。



		
		
		
		
还没有评论,来说两句吧...