節點http服務器，在第一次api調用後收到404

你好，我正在嘗試創建一個網站，使用api來獲取總線的出發時間。它首次成功進行api調用並接收到正確的信息。但是，當我試圖實現刷新功能，我第一次得到以下錯誤信息。節點http服務器，在第一次api調用後收到404

交叉原點請求僅支持協議方案：http，data，chrome，chrome-extension，https。

對此的解決方案據說是啓動本地服務器，所以我通過使用節點和「http-server -c-1」命令來做到這一點。該網站可以通過本地主機進行訪問，但不會刷新。我收到以下錯誤。

「GET http://localhost:8080/undefined 404（未找到）」（開發工具說，第12行出現錯誤）

HTML

HTML`<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"/> 
    <title>Tider</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
    <h1 id="Resa">Resa</h1> 
    <p id="UpdatedP"></p> 
    <div id="OriginDiv"> 
    <ul id= "OriginList"> 
    <li>Från</li> 
    </ul> 
</div> 

<div id="DestinationDiv"> 
    <ul id="DestinationList"> 
     <li>Mot</li>`enter code here` 
    </ul> 
</div> 

<div id="TimeDiv"> 
<ul id="timeList"><li>Avgång</li></ul> 
</div> 
<div id="FrammeDiv"> 
    <ul id="FrammeList"> 
    <li>Framme</li> 
    </ul> 
</div> 
<button type="button" onclick="httpGetAsync()">Uppdatera</button> 
<script src="ApiScript.js"></script> 
</body> 
</html>`

var url = "https://api.resrobot.se/v2/trip?key=XXXXX&originId=XXXXX&destId=XXXXXX&format=json"; 

httpGetAsync(url, displayResponse); 
function httpGetAsync(theUrl, callback) { 
    console.log("httpGetAsync running..."); 
    var xmlHttp = new XMLHttpRequest(); 
    xmlHttp.onreadystatechange = function() { 
     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) 
      callback(xmlHttp.responseText); 
    }; 
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null); 
    setTimeout(httpGetAsync, 3000); 
} 

function checkIfArray(x) { 
    console.log("CheckIfArray running..."); 
    var returnval = Object.prototype.toString.call(x) == '[object Array]' 
    return returnval; 
} 

function CreateElement(input, ElType) { 
    var liElement; 
    var textNode; 
    var HTMLElement; 
    if (ElType == "origin") { 
     HTMLElement = document.getElementById("OriginList"); 
    } else if (ElType == "destination") { 
     HTMLElement = document.getElementById("DestinationList"); 
    } else if (ElType == "time") { 
     HTMLElement = document.getElementById("timeList"); 
    } else if (ElType == "framme") { 
     HTMLElement = document.getElementById("FrammeList"); 
    } 
     liElement = document.createElement("li"); 
     textNode = document.createTextNode(input); 
     liElement.appendChild(textNode); 
     HTMLElement.append(liElement); 

} 

function updated(){ 
    console.log("updated running..."); 
    var date = new Date(); 
    var returnTime = 0; 
    returnTime = "Uppdaterad: " +date.getHours() +":"+ date.getMinutes(); 
    var HTMLElement = document.getElementById("UpdatedP"); 
    var timeElement = document.createElement("p"); 
    var UpdateNode = document.createTextNode(returnTime); 
    timeElement.appendChild(UpdateNode); 
    HTMLElement.append(timeElement); 
} 

function displayResponse(data) { 
    console.log("displayResponse running..."); 
    var ResultObj = JSON.parse(data); 
    //console.log("DATA: " + data); 
    //console.log("TestObj: " + ResultObj.Trip[0].LegList.Leg[0].Origin.name); 
    //console.log("More TIme: " + ResultObj.Trip[1].LegList.Leg[0].Origin.time); 
    if (checkIfArray(ResultObj.Trip)) { 
     for (var i = 0; i < ResultObj.Trip.length; i++) { 
      //console.log("Origin " + i + ": " + ResultObj.Trip[i].LegList.Leg[0].Origin.name); 
      CreateElement(ResultObj.Trip[i].LegList.Leg[0].Origin.name, "origin"); 
     } 
     for (var i = 0; i < ResultObj.Trip.length; i++) { 
      CreateElement(ResultObj.Trip[i].LegList.Leg[0].Destination.name, "destination"); 
     } 
     for (var i = 0; i < ResultObj.Trip.length; i++) { 
      CreateElement(ResultObj.Trip[i].LegList.Leg[0].Origin.time.substring(0,5), "time"); 
     } 
     for (var i =0; i<ResultObj.Trip.length; i++){ 
      CreateElement(ResultObj.Trip[i].LegList.Leg[ResultObj.Trip[i].LegList.Leg.length-1].Destination.time.substring(0,5), "framme"); 
     } 
    } 
} 

function checkArray(x) { 
    var returnval = Object.prototype.toString.call(x) === '[object Array]'; 
    return returnval; 
}

來源

2017-10-07 Markus

您沒有任何通話httpGetAsync參數，當您創建「刷新」計時器。

這條線：

setTimeout(httpGetAsync, 3000);

將調用httpGetAsync()每3秒。因此，您將每三秒鐘製作一個XMLHttpRequest至http://localhost:8080/undefined。

設置超時時在正確的參數中包含正確的參數。

setTimeout(function(){ 
    httpGetAsync(theUrl,displayResponse); 
},3000);

或包含在setTimeout()調用的參數（更多細節在這裏：MDN web docs: setTimeout）：

setTimeout(httpGetAsync,3000,theUrl,displayResponse);

或者使用Function.prototype.bind()

來源

2017-10-07 12:40:47 rckrd

這解決了這個問題。謝謝！ – Markus

節點http服務器，在第一次api調用後收到404

回答

相關問題