我正在尝试做一个低依赖性的JavaScript来显示树莓派的温度。服务器发送一个JSON作为获取请求的响应,客户端显示一个网页。
服务器正在按预期工作,我已经签入浏览器和使用 Postman
const { spawn } = require("child_process");
const http = require('http');
http.createServer((req, res) => {
if (req.url === '/') {
res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });
const temp = spawn('cat', ['/sys/class/thermal/thermal_zone0/temp']);
temp.stdout.on('data', function (data) {
data = data / 1000;
console.log('Temperature: ' + data + '°C');
res.end(JSON.stringify({"temp":data}));
});
temp.stderr.on('data', function (data) {
res.end(JSON.stringify({"temp":"Unavailable"}));
});
}
else {
res.writeHead(404, { 'Content-Type': 'application/json; charset=utf-8' });
res.end(JSON.stringify({"temp":"Unavailable"}));
}
}).listen((process.argv[2] || 64567), () => {
console.log('Server listening on http://localhost:' + (process.argv[2] || 64567));
});
这是客户端代码
<body>
<script defer>
await fetch('http://localhost:64567',{mode: 'no-cors'}).then(res => JSON.parse(res)).then(temp => document.getElementById("value").innerHTML = temp.temp);
// SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
/*
await fetch('http://localhost:64567',{mode: 'no-cors'}).then(res => res.json()).then(temp => document.getElementById("value").innerHTML = temp.temp)
// SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
await fetch('https://api.npoint.io/d5a7160bab77dd869b82').then(res => res.json()).then(temp => document.getElementById("value").innerHTML = temp.temp)
// This one works
*/
</script>
<h3>Temperature:<span id="value"> </span> °C</h3>
</body>
但是当我尝试在客户端使用fetch api时,JSON.parse针对不同的方法给出了两种不同类型的错误,但是当我使用公共托管的JSON bin时,它可以工作。
期望值:正确提取和解析JSON。
尝试:
1.解析JSON的两种不同方法
1.对JSON使用不同的主机
2条答案
按热度按时间laawzig21#
res
是Response
,而不是文本。使用res.json()
将正文文本解析为JSON。6za6bjd02#
所以我想明白了,多亏了@ Unmitigate,我所需要做的就是在服务器端设置CORS,并在客户端删除
mode:no-cors
。在服务器中添加像这样的头文件是一种修复方法。