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

Question

您好，我正在嘗試創建一個使用API獲取公交車發車時間的網站。 它第一次成功調用api，並接收正確的信息。 但是，當我嘗試實現刷新功能時，我首先收到以下錯誤消息。

跨源請求僅支持以下協議方案：http，數據，chrome，chrome擴展名，https。

解決此問題的方法應該是啟動本地服務器，因此我通過使用node和“ http-server -c-1”命令來完成此操作。 可以通過localhost訪問該網站，但不會刷新。 我收到以下錯誤。

“ GET http：// localhost：8080 / undefined 404（未找到）”（Dev工具說該錯誤發生在第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>`

JS

    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;
}

Answer 1

創建“刷新”計時器時，您正在調用不帶任何參數的httpGetAsync 。

這行：

setTimeout(httpGetAsync, 3000);

將每3秒調用httpGetAsync() 。 因此，您將每三秒鍾向http://localhost:8080/undefined發送一個XMLHttpRequest 。

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

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

或在setTimeout()調用中包含參數（此處有更多詳細信息： MDN Web文檔：setTimeout ）：

setTimeout(httpGetAsync,3000,theUrl,displayResponse);

或使用Function.prototype.bind（）

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

問題描述

1 個解決方案

解決方案1
0 已采納 2017-10-07 12:40:47

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

問題描述

1 個解決方案

解決方案1 0 已采納 2017-10-07 12:40:47

解決方案1
0 已采納 2017-10-07 12:40:47