Menu
When I run my code it errors with:
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>
900
You are facing a problem with cross origin resource sharing which is a security feature by your browser.
Two options two avoid this:
use a webserver. To just run a simple webserver for your static html/js files something like the npm http-server (https://www.npmjs.com/package/http-server) could be used
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"
The parameters --disable-web-security --user-data-dir are the important part here.
Note: Just use this for development. You allow cross origin requests by this for all websites you visit.
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
