如何在index.html中获取data.json数据？解决fetch()跨域问题

直接双击打开index.html时，浏览器使用file://协议，同源策略会限制该协议下的跨源请求（哪怕是同目录的JSON文件），因此触发CORS错误。以下是几种可行的解决方法：

1. 启动本地HTTP服务器（推荐方案） #

通过HTTP协议访问文件，彻底规避file协议的限制：

• Python内置服务器：打开终端进入项目目录，执行对应命令：
  • Python 3：python -m http.server 8000
  • Python 2：python -m SimpleHTTPServer 8000
    之后在浏览器访问http://localhost:8000/index.html，此时fetch请求data.json就不会出现CORS问题。
• Node.js的http-server：先全局安装工具npm install -g http-server，进入项目目录执行http-server，根据终端提示的地址访问即可。

2. 临时修改浏览器安全设置（仅用于开发测试） #

注意：此方法会降低浏览器安全性，测试完成后务必恢复设置：

• Chrome：右键Chrome快捷方式 → 属性 → 目标栏末尾添加 --disable-web-security --user-data-dir="C:/ChromeDevSession"（路径可自定义），重启浏览器后再打开index.html。
• Firefox：地址栏输入about:config，搜索security.fileuri.strict_origin_policy，将其值改为false。

3. 内嵌JSON数据到HTML（快速临时方案） #

如果JSON数据量不大，直接把data.json的内容复制到HTML的<script>标签中作为全局变量，无需使用fetch：

<script>
  // 粘贴data.json的全部内容
  const jsonData = {
    "key1": "value1",
    "key2": "value2"
  };
</script>

之后直接在JS代码中使用jsonData即可，省去请求步骤。

4. 修正你的fetch代码逻辑 #

你的fetchData函数中参数filename未被使用，需将fetch(url)改为fetch(filename)，否则函数逻辑不完整：

async fetchData(filename) {
  try {
    const response = await fetch(filename);
    const jsonData = await response.json();
    return jsonData;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

内容的提问来源于stack exchange，提问作者user22734805