【问题标题】:Fetch API cannot load file:///C:/Users/woshi/Desktop/P5/p5/JSON/birds.json. URL scheme must be "http" or "https" for CORS request [duplicate]Fetch API 无法加载 file:///C:/Users/woshi/Desktop/P5/p5/JSON/birds.json。对于 CORS 请求,URL 方案必须是“http”或“https”[重复]
【发布时间】:2018-10-30 22:06:07
【问题描述】:

当我运行我的代码时,它会出错:

Fetch API 无法加载 file:///C:/Users/woshi/Desktop/P5/p5/JSON/birds.json。 URL 方案必须 对于 CORS 请求,为“http”或“https”

//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>

【问题讨论】:

    标签: javascript json


    【解决方案1】:

    您正面临跨源资源共享问题,这是您浏览器的一项安全功能。

    两个选项二避免这种情况:

    1. 使用网络服务器。要为您的静态 html/js 文件运行一个简单的网络服务器,可以使用类似 npm http-server (https://www.npmjs.com/package/http-server) 的东西

    2. 更改您的 chrome 启动参数并让它知道您想忽略此安全功能。您可以通过更改启动配置来做到这一点,例如像这样

    "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是这里的重要部分。

    注意:仅用于开发。您允许对您访问的所有网站进行跨源请求。

    【讨论】:

    猜你喜欢
    • 2018-07-21
    • 2021-04-20
    • 2020-01-27
    • 2019-09-24
    • 2016-04-04
    • 1970-01-01
    • 2017-07-25
    • 1970-01-01
    • 2021-11-07
    相关资源
    最近更新 更多