如何用script.js在HTML中展示JSON数据？解决MIME类型报错

你遇到的错误是因为ES模块规范中，直接导入JSON文件时，服务器返回的application/json MIME类型不符合模块脚本的要求，下面是几种可行的解决方法：

方法1：使用Fetch API获取JSON数据 #

这是纯静态环境下最通用的方案，无需修改服务器或文件格式：

修改script.js如下：

// 用fetch请求JSON文件
fetch('./data.json')
  .then(response => response.json()) // 解析JSON数据
  .then(data => {
    // 将JSON转为格式化字符串展示，也可按需渲染DOM结构
    document.getElementById("demo").innerHTML = JSON.stringify(data, null, 2);
    console.log(data);
  })
  .catch(error => console.error('加载JSON失败:', error));

方法2：将JSON转为JS模块导出 #

把data.json重命名为data.js，并修改内容为导出JSON对象：

// data.js
export default {
  // 原JSON的内容，示例：
  title: "测试数据",
  content: ["条目1", "条目2", "条目3"]
};

然后在script.js中正常导入：

import demo from './data.js';
document.getElementById("demo").innerHTML = JSON.stringify(demo, null, 2);
console.log(demo);

方法3：配置服务器（仅适用于可控服务器环境） #

如果你的服务器支持自定义配置（比如Node.js Express），可以添加中间件调整JSON文件的MIME类型，使其符合模块导入要求：

// Express服务器示例配置
app.use('/js', (req, res, next) => {
  if (req.path.endsWith('.json')) {
    res.type('application/javascript');
  }
  next();
});

注：此方法需要服务器权限，纯静态页面优先推荐前两种方案。

内容的提问来源于stack exchange，提问作者Александр