来自本地文件的 XMLHttpRequest send() 失败

Question

我想从计算机中的本地文件加载 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)

}

};

Answer 1

您不能向本地资源发出 HttpRequest。

您需要在 localhost 服务器中提供此 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>