关于javascript：Fetch API无法加载文件：/// C：/Users/woshi/Desktop/P5/p5/JSON/birds.json。 对于CORS请求，URL方案必须是“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

本问题已经有最佳答案，请猛点这里访问。

当我运行我的代码时，它出错了：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//birds.js
var data;

function preload() {
    data = loadJSON("birds.json");
}

function setup() {
    noCanvas();
}

function draw() {
    var bird = data.birds[1].members[2];
    CreateP(bird);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
//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"
      ]
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//birds.html

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

您遇到了跨源资源共享问题，这是浏览器的安全功能。

两个选项两个避免这个：

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

  • 更改您的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是这里的重要部分。

    注意：只需将其用于开发。 您可以为您访问的所有网站提供跨域请求。