页面地图覆盖元素不显示，MIME类型错误如何快速修复？

核心问题原因 #

你的代码通过<script>标签加载data.json文件，但服务器返回的MIME类型是标准的application/json，而浏览器的严格MIME类型检查会阻止执行非脚本类型的文件；本地环境因为协议或服务器配置宽松，没有触发这个检查，所以能正常运行。

最简单的修复方法（按推荐程度排序） #

方法1：改用AJAX加载JSON数据（规范且长期可用） #

替换原来用<script>引入JSON的代码，用fetch获取数据：

fetch('/javascript/data.json')
  .then(res => res.json())
  .then(data => {
    // 这里写原来依赖该JSON数据的地图渲染逻辑
  })
  .catch(err => console.error('数据加载失败:', err));

方法2：临时调整服务器MIME类型配置（快速但不规范） #

如果有权限修改服务器配置，给.json文件添加脚本类MIME类型：

• Apache（在.htaccess中添加）：

  AddType application/javascript .json
  

• Nginx（在站点配置中添加）：

  types {
      application/javascript json;
  }
  

注：这种方法不符合JSON的标准MIME规范，仅作为临时应急方案。

方法3：直接嵌入JSON内容到页面脚本（零配置临时修复） #

把data.json里的内容复制出来，直接定义在页面的<script>标签中：

const mapOverlayData = {
  // 粘贴data.json中的所有内容
};

之后地图逻辑直接使用mapOverlayData变量即可，无需再加载外部JSON文件。

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