节点 http 服务器，在第一次 api 调用后收到 404

Question

您好，我正在尝试创建一个网站，该网站使用 api 来获取公共汽车的出发时间。它第一次成功调用 api 并收到正确的信息。但是当我尝试实现刷新功能时，我首先收到以下错误消息。

仅协议方案支持跨源请求：http、数据、chrome、chrome-扩展名、https。

一个解决方案应该是启动一个本地服务器，所以我通过使用节点和 "http-server -c-1" 命令来做到这一点。可以通过本地主机访问该网站，但它不会刷新。我收到以下错误。

"GET http://localhost:8080/undefined 404 (Not Found)"（开发工具说错误发生在第 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

您在创建 "refresh" 计时器时调用 httpGetAsync 时没有任何参数。

这一行：

setTimeout(httpGetAsync, 3000);

将每 3 秒调用一次 httpGetAsync()。因此，您将每三秒生成一个 XMLHttpRequest 到 http://localhost:8080/undefined。

设置超时时在闭包中包含正确的参数。

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

或在 setTimeout() 调用中包含参数（此处有更多详细信息：MDN web docs: setTimeout）：

setTimeout(httpGetAsync,3000,theUrl,displayResponse);

或使用Function.prototype.bind()

节点 http 服务器，在第一次 api 调用后收到 404

Node http server, receiving a 404 after first api call

javascript

http-status-code-404