ajax-无法加载资源::netERR_CONNECTION_REFUSED

Question

Webapp/page能够在从localhost(运行express应用程序的服务器(运行客户端/web浏览器时加载从本地express api请求的数据，但是，当将网络上另一台机器的浏览器指向服务器的IP:端口以查看Webapp时，当ajax启动时，我会收到一个错误：

"未能加载资源：：netERR_CONNECTION_REFUSED">

编辑：chrome中的开发工具很模糊，并没有对这个问题提供太多的见解(对我来说(。当在firefox中查看相同内容时，开发工具的网络选项卡使问题变得明显：

"跨来源请求被阻止：同源策略不允许正在读取远程资源localhost:1337/getDeviceStatusAllCached"；

所以这是一个CORS问题-下面的答案是为我修复的。

相关代码：app.js-

app.get('/', function(req, res){
logger.printWriteLine('Issues tracker (re)loaded.', 0);
res.sendFile(path.join(__dirname, '/views/wallboard.html'));
})

app.get('/getDeviceStatusAllCached', (req, res) => {
logger.printWriteLine('Front-end requesting cached data.');
reqs.retrieveCachedDeviceStatusAll(obj => res.send(obj));
});

reqs.js-

retrieveCachedDeviceStatusAll: function (callback) {
fs.readFile('./data/getDeviceStatusAll.json', 'utf-8', function(err,data){
if(err) throw err;
obj = JSON.parse(data);
console.log(JSON.stringify(data)); 
callback(obj);
});
}

墙板.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table ... working table stuff>
</table>

<script>
var dataArray = [];
console.log('running ajax');
$.ajax({

method: 'GET',
url: 'http://localhost:1337/getDeviceStatusAllCached',
dataType: "json",
success:function(response){
dataArray = response
buildTable(dataArray)
console.log(dataArray)
}
})
</script>

Answer 1

这是我必须添加到我的app.js中的内容，以允许来自不同来源的请求从api读取数据。如果您不想允许来自任何来源的访问，请指定domain/ip而不是*。

app.use(function(req,res,next){
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
});

此外，在我在wallb.html中的ajax GET请求中，使用了"localhost:1337"，这显然需要更改为服务器的IP。

关于CORS的更多信息，它是什么/为什么会发生/如何修复：XMLHttpRequest无法加载XXX否'；访问控制允许来源'；标题