Javascript 从本地文件发送XMLHttpRequest（）失败

我想从计算机中的本地文件加载JSON文件，我已经下载了Node.js并启动了它。但它始终显示此消息“无法加载…跨源请求仅支持…”

F12还显示了行ourRequest.send（）中的文件

这是我的密码

var btn=document.getElementById("btn");
var tajweedContainer=document.getElementById("rule_info");
btn.addEventListener("click",function(){

var ourRequest= new XMLHttpRequest();
ourRequest.open('GET','testjson.json');
ourRequest.onload=function(){
var ourData=JSON.parse(ourRequest.responseText);
    renderHtml(ourData);
}
ourRequest.send();

});
function renderHtml(data){
    var htmlString="";
    for(var i=0;i<data.length;i++){
        htmlString="<p>"+data[i].surah+data[i].ayah+"the grammar ";
       for(var ii=0;ii<data[i].annotations;ii++){
           htmlString+=data[i].annotations.end[ii]+data[i].annotations.rule[ii]+data[i].annotations.start[ii]

    }
htmlString+=".</p>";
tajweedContainer.insertAdjacentHTML('beforeend',htmlString)

}

};

var btn=document.getElementById（“btn”）；
var tajweedContainer=document.getElementById（“规则信息”）；
btn.addEventListener（“单击”，函数（）{
var ourRequest=new XMLHttpRequest（）；
open（'GET'，'testjson.json'）；
ourRequest.onload=函数（）{
var ourData=JSON.parse（ourRequest.responseText）；
renderHtml（我们的数据）；
}
ourRequest.send（）；
});
函数renderHtml（数据）{
var htmlString=“”；
对于（var i=0；i您不能对本地资源进行HttpRequest

您需要在本地主机服务器中提供此json文件

例如，您的
testjson.json
应该可以通过
http://localhost/testjson.json
，然后向该端点发出HTTP请求

这段代码在我这里可以正常工作，renderHtml（）中的
console.log（data）；
正在返回
testjson.json

<button id="btn">Render</button>
<div id="rule_info"></div>

<script>
var btn = document.getElementById("btn");
var tajweedContainer=document.getElementById("rule_info");

btn.addEventListener("click",function(){
var ourRequest= new XMLHttpRequest();
ourRequest.open('GET','http://localhost/testjson.json');
ourRequest.onload=function(){
var ourData=JSON.parse(ourRequest.responseText);
    renderHtml(ourData);
}
ourRequest.send();

});
function renderHtml(data){
    console.log(data);

    var htmlString="";
    for(var i=0;i<data.length;i++){
        htmlString="<p>"+data[i].surah+data[i].ayah+"the grammar ";
       for(var ii=0;ii<data[i].annotations;ii++){
           htmlString+=data[i].annotations.end[ii]+data[i].annotations.rule[ii]+data[i].annotations.start[ii]

    }
htmlString+=".</p>";
tajweedContainer.insertAdjacentHTML('beforeend',htmlString)

}

};
</script>

渲染
var btn=document.getElementById（“btn”）；
var tajweedContainer=document.getElementById（“规则信息”）；
btn.addEventListener（“单击”，函数（）{
var ourRequest=new XMLHttpRequest（）；
我们的请求。打开（'GET'，'http://localhost/testjson.json');
ourRequest.onload=函数（）{
var ourData=JSON.parse（ourRequest.responseText）；
renderHtml（我们的数据）；
}
ourRequest.send（）；
});
函数renderHtml（数据）{
控制台日志（数据）；
var htmlString=“”；
对于（var i=0；从节点本地服务器打开页面并从同一服务器实例提供json文件）您的意思是我打开节点并编写http服务器“文件位置”我按照您所说的做了，但它向我显示了此错误“GET 0（）（匿名）@jsTajweed.js:11”，该行包含我们的请求。send（）；如果您在浏览器中键入
localhost/testjson.json
，您可以访问它？>>>>>>我可以使用此链接进行访问，但当我粘贴代码时，出现以下错误：“加载失败：请求的资源上不存在'access Control Allow Origin'头。因此，不允许访问Origin'null'
Origin'null'因此不允许访问。
通常是本地文件系统
文件：//
，请确保通过
http://