Javascript 使用XMLHttpRequest从本地主机加载JSON会不断生成CORS错误

我是javascript的新手。我一直在练习将JSON从localhost加载到本地html文件，但不断看到CORS错误

[问题]：Chrome/Firefox上的不同CORS错误消息

• Chrome：“CORS策略已阻止从源“null”访问位于“file://…（本地路径）…charStat.json”的XMLHttpRequest:跨源请求仅支持协议方案：http、数据、Chrome、Chrome扩展名、https。”
• Firefox：“跨源请求被阻止：同源策略不允许读取远程资源的文件：///…（本地路径）…charStat.json。（原因：CORS请求不是http）。”

[我试过的]

• 使用php+nginx设置一个简单的web服务器。没有域，只有本地主机（）
• 在localhost（）下找到JSON文件
• 在Firefox about:config中，选择退出“privacy.file\u unique\u origin”（设置为“false”）

battle.html（本地文件）

将json文件（charStat.json）复制到battle.html（和battle.js）所在的同一目录中

启动本地服务器-> 然后可以通过ajax调用加载json：

fetch('charStat.json')
  .then(response => response.json())
  .then(data => console.log(data));

---

谢谢你，马克。我将

fetch

代码添加到我的js文件中，它成功了。幸运的是，不需要移动charStat.json文件，而是使用了我定义的仍然有效的

路径。
// abbreviated

const request = new XMLHttpRequest();
const path = 'http://127.0.0.1/charStat.json';

const statTable = function () {
  $.getJSON(`charStat.json`, function(data) {
    $.each(data.statsByClass, function(i, f) {
      let tblRow = "<tr>"
      + "<td>" + f.class + "</td>"
      + "<td>" + f.ct + "</td>"
      + "<td>" + f.statTable[1].level + "</td>"
      + "<td>" + f.statTable[1].hp + "</td>"
      + "<td>" + f.statTable[1].en + "</td>"
      + "</tr>"
      $(tblRow).appendTo("#chardata tbody");
    });
  });
}

function loadJSONFile(file, callback) {
  request.open(`GET`, file, true);
  request.responseType = 'json'; 
  request.onreadystatechange = function() {
    if (request.readyState === 4 && request.status == `200`) {
      callback(request.response);
    }
  }
  request.send(null);
}

loadJSONFile(path, statTable);

{
  "statsByClass" : [
  {
    "class" : "Warrior",
    "ct" : 300,
    "statTable" : [
      { "level" : 0, "hp" : 1000, "en" : 200, "str" : 20, "vit" : 16, "agl" : 10, "spd" : 15, "int" : 8, "xpToNextLv" : 1 },
      { "level" : 1, "hp" : 1200, "en" : 300, "str" : 24, "vit" : 20, "agl" : 12, "spd" : 19, "int" : 9, "xpToNextLv" : 300 },
      { "level" : 2, "hp" : 1400, "en" : 300, "str" : 26, "vit" : 22, "agl" : 13, "spd" : 19, "int" : 9, "xpToNextLv" : 400 },

  // ... abbreviated ...
    ]
  }
]}

fetch('charStat.json')
  .then(response => response.json())
  .then(data => console.log(data));