Fetch API跨域请求报错：URL scheme需为http/https，求解决方案

问题场景 #

当使用p5.js的loadJSON方法加载本地JSON文件时，触发了浏览器的CORS安全限制，报错信息如下：

Fetch API cannot load file:///C:/Users/woshi/Desktop/P5/p5/JSON/birds.json. URL scheme must be "http" or "https" for CORS request

相关代码 #

JavaScript代码（birds.js） #

//birds.js 
var data; 
function preload() { 
  data = loadJSON("birds.json"); 
} 
function setup() { 
  noCanvas(); 
} 
function draw() { 
  var bird = data.birds[1].members[2]; 
  createP(bird); // 注意：p5.js函数为小写开头，原代码的CreateP需改为createP
}

JSON数据（birds.json） #

{ 
  "description": "Birds of Antarctica, grouped by family", 
  "source": "https://en.wikipedia.org/wiki/List_of_birds_of_Antarctica", 
  "birds": [ 
    { 
      "family": "Albatrosses", 
      "members": [ 
        "Wandering albatross", 
        "Grey-headed albatross", 
        "Black-browed albatross", 
        "Sooty albatross", 
        "Light-mantled albatross" 
      ] 
    }, 
    { 
      "family": "Cormorants", 
      "members": [ 
        "Antarctic shag", 
        "Imperial shag", 
        "Crozet shag" 
      ] 
    }, 
    { 
      "family": "Diving petrels", 
      "members": [ 
        "South Georgia diving petrel", 
        "Common diving petrel" 
      ] 
    }, 
    { 
      "family": "Ducks, geese and swans", 
      "members": [ 
        "Yellow-billed pintail" 
      ] 
    }, 
    { 
      "family": "Gulls", 
      "members": [ 
        "Kelp gull" 
      ] 
    }, 
    { 
      "family": "Penguins", 
      "members": [ 
        "King penguin", 
        "Emperor penguin", 
        "Gentoo penguin", 
        "Adelie penguin", 
        "Chinstrap penguin", 
        "Rockhopper penguin", 
        "Macaroni penguin" 
      ] 
    }, 
    { 
      "family": "Shearwaters and petrels", 
      "members": [ 
        "Antarctic giant petrel", 
        "Hall's giant petrel", 
        "Southern fulmar", 
        "Antarctic petrel", 
        "Cape petrel", 
        "Snow petrel", 
        "Great-winged petrel", 
        "White-headed petrel", 
        "Blue petrel", 
        "Broad-billed prion", 
        "Salvin's prion", 
        "Antarctic prion", 
        "Slender-billed prion", 
        "Fairy prion", 
        "Grey petrel", 
        "White-chinned petrel", 
        "Kerguelen petrel", 
        "Sooty shearwater" 
      ] 
    }, 
    { 
      "family": "Sheathbills", 
      "members": [ 
        "Snowy sheathbill" 
      ] 
    }, 
    { 
      "family": "Skuas and jaegers", 
      "members": [ 
        "South polar skua", 
        "Brown skua" 
      ] 
    }, 
    { 
      "family": "Storm petrels", 
      "members": [ 
        "Grey-backed storm petrel", 
        "Wilson's storm petrel", 
        "Black-bellied storm petrel" 
      ] 
    }, 
    { 
      "family": "Terns", 
      "members": [ 
        "Arctic tern", 
        "Antarctic tern" 
      ] 
    } 
  ] 
}

HTML代码（birds.html） #

//birds.html 
<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8"> 
  <title>JSON</title> 
  <script src="../p5.js"></script> 
  <script src="../p5.dom.js"></script> 
  <script src="../p5.sound.js"></script> 
  <script src="birds.js"></script> 
</head> 
<body> 
</body> 
</html>

解决方法 #

这个错误的核心是浏览器安全策略禁止通过file://协议加载本地文件做跨域请求，必须使用http/https协议。下面是几种可行的解决方式：

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

这是最规范且长期可用的方案，几种简单的启动方式：

• 用Python快速启动：
  打开命令行，进入项目根目录，Python3用户运行：python -m http.server；Python2用户运行：python -m SimpleHTTPServer。启动后在浏览器访问http://localhost:8000，找到birds.html打开即可。
• 用VS Code的Live Server插件：
  安装插件后，右键点击birds.html选择「Open with Live Server」，插件会自动启动服务器并打开页面。
• 用p5.js官方编辑器：
  直接上传项目文件到p5.js Web Editor，它自带HTTP服务器环境，可直接运行代码。

2. 临时关闭浏览器CORS限制（仅测试用） #

这种方式会降低浏览器安全性，只适合临时调试：

• Chrome浏览器：关闭所有Chrome窗口，在命令行运行：chrome.exe --disable-web-security --user-data-dir="C://ChromeDevSession"（Windows系统，其他系统可调整对应启动命令）。
• Firefox浏览器：在地址栏输入about:config，找到security.fileuri.strict_origin_policy，设置为false。

3. 将JSON嵌入JS代码（快速临时方案） #

如果只是短时间测试，可以把JSON内容直接写进JavaScript文件，不用单独加载：
修改birds.js如下：

//birds.js 
var data = { 
  "description": "Birds of Antarctica, grouped by family", 
  "source": "https://en.wikipedia.org/wiki/List_of_birds_of_Antarctica", 
  "birds": [ 
    // 保留原JSON的所有鸟类数据内容
    { 
      "family": "Albatrosses", 
      "members": [ 
        "Wandering albatross", 
        "Grey-headed albatross", 
        "Black-browed albatross", 
        "Sooty albatross", 
        "Light-mantled albatross" 
      ] 
    },
    // ... 其他鸟类数据省略
  ] 
}; 
function setup() { 
  noCanvas(); 
  var bird = data.birds[1].members[2]; 
  createP(bird); 
} 
// 无需preload和draw函数，数据已直接定义

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