尝试访问本地json文件时出现CORS错误[重复]
我所要做的就是访问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
}
]
}
我真的不明白这个问题，但如果我做错了，有人能告诉我更好的方法吗？
共有1个答案
所以当你叫$。getJSON（）您实际上正在执行一个GET调用，如JQuery文档所述。https://api.jquery.com/jQuery.getJSON/因此，即使您使用的是文件协议，浏览器也会强制执行CORS。
要直接加载文件并解决该问题，可以使用HTML5中的文件API。下面的链接很好地介绍了如何将文件数据读入内存，然后只需将数据转换为您想要的格式，在本例中为JSON。
https://www.html5rocks.com/en/tutorials/file/dndfiles/
我想最简单的选择是使用readAsText（），然后使用vanilla JS将其解析为JSON。希望这有帮助！
-
问题内容： 我正在尝试使用香草JS AJAX请求从本地存储的JSON文件中拉回JSON字符串（特别是尝试不使用JQuery）-以下代码基于此答案 -但我在Chrome控制台中不断收到错误（见下文）。有什么想法我要去哪里吗？我尝试更改xhr.open和.send请求的位置，但仍然收到错误消息。我怀疑问题在于.send（）请求？ Chrome中的控制台抛出此错误： “ XMLHttpRequest无法
-
我正在尝试使用GetPreSignedUrlRequest方法访问已上载到AmazonS3的文件。我使用的代码如下所示：- 由此生成的url然后用于指向文件。看起来像http://s3.amazonaws.com/mybucketname/VZcbKsZgR2qyOMkLU1XT_jquery_ui_touch-punch_min_js.txt?X-Amz-Expires=300 但这给了我签名不
-
尝试从本地文件获取 json 数据并继续获取 “JSON.parse：数据意外结束在第 1 行第 1 列” 。 我已经尝试了fetch函数的许多参数，但是我总是得到至少一个错误。 JSON数据 我想安慰你。记录数据以确保其正常运行。
-
问题内容： 我是angularjs的新手，我整天都在网上进行搜索，目的是找到一种解决方案，可以从本地json文件获取数据，而不必在我的webapp中使用本地主机。不幸的是，我还没有找到任何东西。我尝试使用$http.get，但收到Cross Origin *错误。 有没有其他方法可以从本地json文件中获取数据而不必在本地托管我的webapp？ angularjs是否有其他功能可以从本地json文
-
当我试图在我的页面上显示谷歌地图时，出现了这个错误。“JavaScript运行时错误：无法获取未定义或空引用的属性'offsetWidth'” 它来自于Javascript函数，初始化（）来自var map=newgoogle.maps.Map（document.getElementById（"map-帆布"） 这是我的html 这是我的CSS
-
我带着一个我无法解决的问题来到这里。 我在版本1.7中有一个prestashop，我已经移动到另一台服务器，值得一提的是，在旧服务器中，prestashop运行良好。 当我将prestashop迁移到新服务器时，除了我想进入后台，当我想进入后台时，只需将页面留空，其他一切都可以正常工作。 我已经激活了调试模式，但它没有给我任何与后台相关的错误，有趣的是，当调试模式被激活时，我可以毫无问题地进入后台