尝试访问本地 json 文件时出现 CORS 错误 [重复]

Question

我要做的就是访问 json 文件的内容并将它们显示到网页上。但我收到了这个错误：

Access to XMLHttpRequest at 'file:///C:/Users/bobal/Documents/htmlTry/myData.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

JSON 文件和 HTML 文件都在同一个文件夹中。

这是我的html页面：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script>

    $(function() {


   var people = [];

   $.getJSON('Assets/myData.json', function(data) {
       $.each(data.person, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" +
           "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>"
           $(tblRow).appendTo("#userdata tbody");
     });

   });

});
</script>
</head>

<body>

<div class="wrapper">
<div class="profile">
   <table id= "userdata" border="2">
  <thead>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email Address</th>
            <th>City</th>
        </thead>
      <tbody>

       </tbody>
   </table>

</div>
</div>

</body>
</html>

这里是 JSON 文件，myData.json：

{
    "person": [
        {
            "firstName": "Clark",
            "lastName": "Kent",
            "job": "Reporter",
            "roll": 20
        },
        {
            "firstName": "Bruce",
            "lastName": "Wayne",
            "job": "Playboy",
            "roll": 30
        },
        {
            "firstName": "Peter",
            "lastName": "Parker",
            "job": "Photographer",
            "roll": 40
        }
    ]
 }

我真的不明白这个问题，但如果我做错了，有人可以告诉我一个更好的方法吗？

Answer 1

因此，当您调用 $.getJSON() 时，您实际上是在执行 GET 调用，如此处 JQuery 文档中所述。 https://api.jquery.com/jQuery.getJSON/ 因此，即使您使用的是文件协议，浏览器也会强制执行 CORS。

要直接加载文件并解决该问题，您可以使用 HTML5 中的 Files API。下面的链接很好地介绍了将文件数据读入内存的过程，然后只需将数据转换为您要查找的格式，在本例中为 JSON。

https://www.html5rocks.com/en/tutorials/file/dndfiles/

我猜想最简单的选择是使用 readAsText() 然后使用 vanilla JS 将其解析为 JSON。希望这会有所帮助！