在Web前端开发中，AJAX已经成为不可或缺的一部分。它可以通过异步请求，在不刷新整个页面的情况下，从后端获取数据，从而提高页面的响应速度和用户体验。
在使用AJAX请求本地JSON数据时，有时会遇到一些错误，比如报错“Access to XMLHttpRequest at 'file:///路径/文件名.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.”这是什么原因导致的呢？
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET","data.json");
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
}
xhr.send();
</script>上面的代码尝试获取一个名为data.json的本地JSON文件。然而，当在浏览器中运行时，会收到上面提到的报错。这是因为浏览器默认会添加CORS相关头信息，以避免跨站点攻击。但是，如果我们要请求本地文件，则请求会被视为跨域请求。
为了解决这个问题，我们可以使用一个HTTP服务器来提供JSON文件，或者使用以下方法：
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET","data.json");
xhr.overrideMimeType("application/json");
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
}
xhr.send();
</script>我们可以使用xhr.overrideMimeType方法来设置MIME类型为application/json，以告诉浏览器返回的是JSON数据，而不是HTML文档。这个方法只需要在AJAX请求之前调用一次即可。
总之，要使用AJAX请求本地JSON数据，需要注意上述问题并按照解决方法进行修复。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
