提取API无法加载file:///C:/Users/woshi/Desktop/P5/p5/JSON/birds.json. URL方案必须为"http"或"https"要求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
问题描述
运行代码时，出现以下错误:
When I run my code it errors with:
提取API无法加载 文件:///C:/Users/woshi/Desktop/P5/p5/JSON/birds.json. URL方案必须 是CORS请求的"http"或"https"
Fetch API cannot load file:///C:/Users/woshi/Desktop/P5/p5/JSON/birds.json. URL scheme must be "http" or "https" for CORS request
//birds.js
var data;
function preload() {
data = loadJSON("birds.json");
}
function setup() {
noCanvas();
}
function draw() {
var bird = data.birds[1].members[2];
CreateP(bird);
}
//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"
]
}
]
}
//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>
推荐答案
您正面临跨源资源共享的问题，这是浏览器的一项安全功能.
You are facing a problem with cross origin resource sharing which is a security feature by your browser.
两个选择两个可以避免这种情况:
Two options two avoid this:
-
使用网络服务器.要为您的静态html/js文件运行一个简单的网络服务器，例如npm http-server( https: //www.npmjs.com/package/http-server )可以使用
更改chrome启动参数，并告知您要忽略此安全功能.您可以通过更改启动配置来实现此目的，例如
Change your chrome startup parameters and let it know that you want to ignore this security feature. You can do this by changing your startup configuration for example like this
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="%LOCALAPPDATA%\Google\Chrome\User Data\development"
参数--disable-web-security --user-data-dir在这里很重要.
注意:仅将其用于开发.您可以以此方式对您访问的所有网站进行跨源请求.
这篇关于提取API无法加载file:///C:/Users/woshi/Desktop/P5/p5/JSON/birds.json. URL方案必须为"http"或"https"要求CORS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
