表示路由觸發器：“發送標頭后無法設置標頭。”錯誤

Question

我是Express的新手，無法從后端向前端發送數據。 這是我想做的事情：主頁上有一個Google Map API（ home.ejs ）。 app.js是服務器代碼：加載首頁后， app.js生成一些隨機位置，然后發送到home.ejs ，因此home.ejs這些位置用作標記。 現在，我想向每個標記添加一個事件偵聽器，以便當鼠標懸停在標記上時，它將GET請求發送到服務器，以請求顯示圖片。

我覺得來回發送請求/數據對我來說是一個很大的挑戰。 當鼠標移到上方時， home.ejs將GET請求發送到/getImage/:num路由，而app.get("/getImage/:num", function(req, res){})通過檢索來響應該請求圖片網址，然后重定向到"/"並將網址發送給它。 這是我收到的“ Can't set headers after they are sent" 。

我對Express和ejs還是那么陌生，甚至不知道自己是否走對了。 我應該如何實施以實現通信？

這是app.js服務器文件

var express = require("express");
var app = express();
//app.use(express.static(__dirname + "/public"));
app.use(express.static(__dirname));
app.set("view engine","ejs");

var lng_min = -84.161;
var lng_max = -83.688; 
var lat_min = 35.849;
var lat_max = 36.067;

var urls = [
    "http://cdn1-www.dogtime.com/assets/uploads/2015/01/file_21032_the-most-popular-dog-and-cat-names.jpg",
    "http://qltyctrl.com/wp-content/uploads/2014/03/Sad-Dog-and-Cat.jpg",
    "https://blog-photos.dogvacay.com/blog/wp-content/uploads/2015/07/dog-cat-smarter-ftr.jpg",
    "http://qltyctrl.com/wp-content/uploads/2014/03/Dog-and-Cat-on-a-Log.jpg",
    "http://images.boomsbeat.com/data/images/full/31730/cat-and-dog_1-jpg.jpg",
    "http://www.vetlocator.com/dailypaws/wp-content/uploads/2012/04/dog-cat2.jpg",
    "http://qltyctrl.com/wp-content/uploads/2014/03/Old-Dog-and-Cat-Sleepy-Embrace.jpg",
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQXNMdvNfc3WYMqbPrJrnjgHJRp2zB1y9vx545LfO-_U5_yvgBo",
    "http://www.vetlocator.com/dailypaws/wp-content/uploads/2012/04/dog-cat8.jpg",
    "http://www.maddiesfund.org/assets/metaImage/robust-dog-cat-foster.jpg"
]

var numLocations = 10;
var data = []; 

function generateData() {
    // generate random locations and the url to download pictures
    for (var i = 0; i < numLocations; ++i) {
        var lng = Math.random() * (lng_max - lng_min) + lng_min;
        var lat = Math.random() * (lat_max - lat_min) + lat_min;
        var tuple = {
            id: i,
            lng: lng,
            lat: lat,
            pic: urls[i]
        };
        data.push(tuple);
    }
}

app.get("/", function(req, res) {
    //res.send("Hello it works");
    data = [];
    generateData();
    res.render("home.ejs", {data: data});
});

app.get("/getImg/:num", function(req, res) {
  console.log(req.params.num);
  var i = Number(req.params.num);
  res.redirect("/");
  res.send({imgUrl: data[i].pic});
});


app.listen(process.env.PORT, process.env.IP, function() {
   console.log("Server Started!"); 
});

home.ejs文件：

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <link rel="stylesheet" type="text/css" href="/public/app.css">

</head>
<body>
    <div id="map">
    </div>

    <script>
      var data = <%- JSON.stringify(data) %>;
      console.log(data.length);
      function initMap() {
        var loc = {lat: 35.9606, lng: -83.9207};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: loc
        });
        for (var i = 0; i < data.length; ++i) { 
            var loc = {lat: data[i].lat, lng: data[i].lng}; 
            var marker = new google.maps.Marker({
                  position: loc,
                  map: map
                  // id: i
            }); 

            var infowindow = new google.maps.InfoWindow();
            google.maps.event.addListener(marker, 'mouseover', (function(marker) {
            return function() {
                  // var content = '<div id="imgDisplay">'
                  //                   + '<img src="http://www.maddiesfund.org/assets/metaImage/robust-dog-cat-foster.jpg">'  
                  //                 + '</div>';
                  // infowindow.setContent(content);
                  // infowindow.open(map, marker);


              var xhr = new XMLHttpRequest();
              var params = 3;
              xhr.open('GET','/getImg/'+params, true);
                  xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                      console.log(responseText);
                }
                  }
            //xhr.send(params);
            xhr.send();


            }
         })(marker));


         }
      }
    </script>

    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOwfkV_GbUXyH2s8iD0gS6pje9J3R96dM&callback=initMap">
    </script>

</body>
</html>

Answer 1

您誤解了redirect的目的。 Express的redirect功能說：“此路徑沒有答案；相反，請嘗試向該其他路徑發送請求，看看它說了什么。” （這是通過3xx響應（例如301或302 ）完成的。）

您的困惑是您認為需要告訴客戶哪個頁面應該呈現給定的URL。 但這不是必需的：服務器不會告訴客戶端如何呈現其發送的數據。 服務器只發送數據，而客戶端決定如何處理數據。

好消息是您的客戶端JavaScript可以正確執行其工作。 它使用XMLHttpRequest從服務器獲取數據。 只需讓服務器實際上使用send函數發送該數據，而不調用redirect 。 一旦客戶端具有要加載的URL，您就可以在<img>元素中將其加載

var img = new Image();
img.src=responseText;
document.body.appendChild(img);

在您的onreadystatechange偵聽器中。 如果不想將元素添加到body可以使用document.getElementById(...)獲得其他元素。

表示路由觸發器：“發送標頭后無法設置標頭。”錯誤

問題描述

1 個解決方案

解決方案1
1 已采納 2017-06-05 18:43:15

表示路由觸發器：“發送標頭后無法設置標頭。”錯誤

問題描述

1 個解決方案

解決方案1 1 已采納 2017-06-05 18:43:15

解決方案1
1 已采納 2017-06-05 18:43:15