Apache：与 Apache 集成时 Express.js 中出现 502 代理错误 [关闭]
Posted
技术标签:
【中文标题】Apache：与 Apache 集成时 Express.js 中出现 502 代理错误 [关闭]【英文标题】：Apache: 502 proxy error in Express.js while integrating with Apache [closed] 【发布时间】：2014-04-18 00:44:40 【问题描述】：我正在托管 apache 和 node.js 服务器以及代理到节点服务器的 apache 服务器。我的框架是 express.js，我正在使用 amCharts。我的代理超时设置为 600。当我打开我的网站时，我只得到amCharts 的静态内容而非动态内容。
这是我的服务器端代码：
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var fs = require('fs');
var data = '';
var app = express();
var server = app.listen(3000);
var io = require('socket.io').listen(server);
// all environments
//app.set('port', process.env.PORT || 3000);
//app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
io.sockets.on('connection', function (socket)
setInterval(function()
var file = __dirname + '/config.json';
fs.readFile(file, 'utf8', function (err, data)
if (err)
console.log('Error: ' + err);
return;
data = JSON.parse(data);
// You can save those values somewhere or just log them to the console
console.dir(data);
socket.emit('news', hello: data);
);
, 5000);
);
app.get('/', function (req, res)
res.render('map1.html');
);
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
// development only
if ('development' == app.get('env'))
app.use(express.errorHandler());
console.log("Express server listening on port 3000");
控制台上的错误是：
GET http://localhost/ammap.css 502 (Proxy Error) localhost/:7
GET http://localhost/ammap.js 502 (Proxy Error) localhost/:8
GET http://localhost/worldLow.js 502 (Proxy Error) localhost/:10
GET http://localhost/jquery.min.js 502 (Proxy Error) localhost/:11
Uncaught ReferenceError: $ is not defined localhost/:85
extension connect DragAndDropController.js:83
GET http://localhost/socket.io/1/?t=1394706750306 502 (Proxy Error)
我的apache conf文件配置是
ProxyRequests off
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
ProxyTimeout 600
<Location />
ProxyPass http://localhost:3000
ProxyPassReverse http://localhost:3000
</Location>
我的客户端代码 map1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amMap examples</title>
<link rel="stylesheet" href="/ammap.css" type="text/css">
<script src="/ammap.js" type="text/javascript"></script>
<script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>
<script src="/worldLow.js" type="text/javascript"></script>
<script src="/jquery.min.js"></script>
<style>
ul,li
list-style-type: none;
li:hover
background-color:white;
color:black;
cursor:pointer;
</style>
<script type="text/javascript">
var val1 = [];
//var test;
var count = 0, a = 0, b = 0;
var x, y, z;
var i, j;
var z1, z2;
var a1 = 0, a2 = 0, a3 = 0, a4 = 0, a5 = 0, a6 = 0;
var new_arr = [];
var db = [];
// var new_arr = [ "name": "Rig1", "time": 29, "lat": 13.45, "longi": 44.12, "level":1 ,
// "name": "Rig2", "time": 2, "lat": 67.45, "longi": 14.12, "level": 0 ,
// "name": "Rig3", "time": 19, "lat": 13.45, "longi": 74.12, "level":3 ,
// "name": "Rig4", "time": 56, "lat": 23.45, "longi": 33.12, "level":0 ,
// "name": "Rig5", "time": 11, "lat": 78.45, "longi": 54.12, "level":5 ,
// "name": "Rig6", "time": 5, "lat": 56.45, "longi": 65.12, "level": 2 ];
var high=[];
// var high = [ name: "", time: "", lat: "", longi: "" ,
// name: "", time: "", lat: "", longi: "" ,
// name: "", time: "", lat: "", longi: "" ,
// name: "", time: "", lat: "", longi: "" ,
// name: "", time: "", lat: "", longi: "" ,
// name: "", time: "", lat: "", longi: "" ];
var med = [ name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ];
var low = [ name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ];
var maint = [ name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ];
var mov = [ name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ];
var oth = [ name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ,
name: "", time: "", lat: "", longi: "" ];
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";
var socket = io.connect('http://localhost');
$(document).ready(function()
socket.on('news', function (data)
JSON.stringify(data);
y = data.hello.length;
new_arr = [];
new_arr = data.hello;
db = [];
for (var i = 0; i < new_arr.length; i++)
if(new_arr[i].level==2)
db.push(
latitude: new_arr[i].lat,
longitude: new_arr[i].longi,
svgPath: targetSVG,
color: "#CC0000",
scale: 0.5,
label: new_arr[i].name,
labelShiftY: 2,
zoomLevel: 3,
title: new_arr[i].name
);
else if(new_arr[i].level==1)
db.push(
latitude: new_arr[i].lat,
longitude: new_arr[i].longi,
svgPath: targetSVG,
color: "#FFFF00",
scale: 0.5,
label: new_arr[i].name,
labelShiftY: 2,
zoomLevel: 3,
title: new_arr[i].name
);
else if(new_arr[i].level==0)
db.push(
latitude: new_arr[i].lat,
longitude: new_arr[i].longi,
svgPath: targetSVG,
color: "#00FF00",
scale: 0.5,
label: new_arr[i].name,
labelShiftY: 2,
zoomLevel: 3,
title: new_arr[i].name
);
else
db.push(
latitude: new_arr[i].lat,
longitude: new_arr[i].longi,
svgPath: targetSVG,
color: "",
scale: 0.5,
label: new_arr[i].name,
labelShiftY: 2,
zoomLevel: 3,
title: new_arr[i].name
);
var test =
type: "map",
pathToImages: "/images/",
imagesSettings:
//rollOverColor: "#CC0000",
rollOverScale: 3,
selectedScale: 3,
//selectedColor: "#CC0000"
,
dataProvider:
map: "worldLow",
images: db
,
smallMap: ,
;
var map = AmCharts.makeChart("mapdiv",test);
map.validateData();
high=[];
low=[];
med=[];
mov=[];
maint=[];
oth=[];
for (i = 0; i < db.length; i++)
// val1 = test.dataProvider.images[parseInt(a)];
z = new_arr[i].level;
if (z == 2)
high.push("name" : new_arr[i].name,
"time" : new_arr[i].time,
"lat" : new_arr[i].lat,
"longi" : new_arr[i].longi);
// a1++;
else if (z == 1)
med.push("name" : new_arr[i].name,
"time" : new_arr[i].time,
"lat" : new_arr[i].lat,
"longi" : new_arr[i].longi);
else if (z == 0)
low.push("name" : new_arr[i].name,
"time" : new_arr[i].time,
"lat" : new_arr[i].lat,
"longi" : new_arr[i].longi);
else if (z == 3)
maint.push("name" : new_arr[i].name,
"time" : new_arr[i].time,
"lat" : new_arr[i].lat,
"longi" : new_arr[i].longi);
else if (z == 4)
mov.push("name" : new_arr[i].name,
"time" : new_arr[i].time,
"lat" : new_arr[i].lat,
"longi" : new_arr[i].longi);
else if (z == 5)
oth.push("name" : new_arr[i].name,
"time" : new_arr[i].time,
"lat" : new_arr[i].lat,
"longi" : new_arr[i].longi);
//a++;
bubbleSort(high, 'time');
bubbleSort(med, 'time');
bubbleSort(low, 'time');
bubbleSort(maint, 'time');
bubbleSort(mov, 'time');
bubbleSort(oth, 'time');
$('#div1').html('');
$('#div2').html('');
$('#div3').html('');
$('#div4').html('');
$('#div5').html('');
$('#div6').html('');
$('#div1').append("<B>High<B/>");
$('#div2').append("<B>Med<B/>");
$('#div3').append("<B>Low<B/>");
$('#div4').append("<B>Maintenance</B>");
$('#div5').append("<B>On Move</B>");
$('#div6').append("<B>Others</B>");
for (i = 0; i < high.length; i++)
$('#div1').append('<li id=dv_' + i + '><B><blink>' + high[i].name + ' ' + high[i].lat + ' ' + high[i].longi + ' ' + high[i].time + '</blink></B></li>');
for (i = 0; i < med.length; i++)
// document.writeln(med[i].name + "," + med[i].time + "<br>");
$('#div2').append('<li id=dk_' + i + '><B>' + med[i].name + ' ' + med[i].lat + ' ' + med[i].longi + ' ' + med[i].time + '</B></li>');
for (i = 0; i < low.length; i++)
// document.writeln(low[i].name + "," + low[i].time + "<br>");
$('#div3').append('<li id=dr_' + i + '><B>' + low[i].name + ' ' + low[i].lat + ' ' + low[i].longi + ' ' + low[i].time + '</B></li>');
for (i = 0; i < maint.length; i++)
// document.writeln(low[i].name + "," + low[i].time + "<br>");
$('#div4').append('<li id=ds_' + i + '><B>' + maint[i].name + ' ' + maint[i].lat + ' ' + maint[i].longi + ' ' + maint[i].time + '</B></li>');
for (i = 0; i < mov.length; i++)
// document.writeln(low[i].name + "," + low[i].time + "<br>");
$('#div5').append('<li id=do_' + i + '><B>' + mov[i].name + ' ' + mov[i].lat + ' ' + mov[i].longi + ' ' + mov[i].time + '</B></li>');
for (i = 0; i < oth.length; i++)
// document.writeln(low[i].name + "," + low[i].time + "<br>");
$('#div6').append('<li id=dg_' + i + '><B>' + oth[i].name + ' ' + oth[i].lat + ' ' + oth[i].longi + ' ' + oth[i].time + '</B></li>');
function bubbleSort(a, par)
var swapped;
do
swapped = false;
for (var i = 0; i < a.length - 1; i++)
if (a[i][par] > a[i + 1][par])
var temp = a[i];
a[i] = a[i + 1];
a[i + 1] = temp;
swapped = true;
while (swapped);
);
);
</script>
</head>
<body>
<div>
<div id="mapdiv" style="margin-right:200px; background-color:#EEEEEE;width:80%; height: 500px;"></div>
<div style="width:20%;float:right;height: 500px;overflow:auto;margin-top:-500px;">
<div id="div1" style="width:250px;border:1px solid black; color:red; overflow:auto; height:83px;text-align:center; background-color:#EEEEEE;">High</div>
<div id="div2" style="width:250px;border:1px solid black; color:#FFCC00; overflow:auto; height:83px; text-align:center; background-color:#EEEEEE;">Med</div>
<div id="div3" style="width:250px;border:1px solid black;color:#2cd918; overflow:auto; height:83px; text-align:center; background-color:#EEEEEE;">Low</div>
<div id="div4" style="width:250px;border:1px solid black; color:#0e1594; overflow:auto; height:83px;text-align:center; background-color:#EEEEEE;">Maintenance</div>
<div id="div5" style="width:250px;border:1px solid black; color:#85219d; overflow:auto; height:83px; text-align:center; background-color:#EEEEEE;">On Move</div>
<div id="div6" style="width:250px;border:1px solid black; color:black; overflow:auto; height:83px; text-align:center; background-color:#EEEEEE;">Others</div>
</div>
</div>
</body>
</html>
【问题讨论】：
能否在加载 CSS 和 JS 文件的位置添加 map1.html 代码？我认为您不需要在任何地方为此设置代理。没有代理也能正常工作。 【参考方案1】：解决了问题。在我刚刚添加的virtualhost conf文件中：
ProxyPass http://localhost:3000/
ProxyPassReverse http://localhost:3000/
/ 在代理传递结束时，它起作用了。
【讨论】：
好的！它适用于 ubuntu 14.04 数字海洋 这适用于 AWS 上的 Ubuntu 14.04.5，谢谢 上帝。我的英雄！谢谢。 这是救命稻草。太感谢了。只需将/ 添加到 ProxyPass 和 ProxyPassReverse 的末尾就可以了。以上是关于Apache：与 Apache 集成时 Express.js 中出现 502 代理错误 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章
我可以将 git local 与 apache localhost 集成吗？
将 Apache Cassandra 与 Apache Ignite 集成