尽管JSON是正确的,但Javascript获取API、JSON.parse()存在语法错误

yrdbyhpb  于 2023-01-29  发布在  Java
关注(0)|答案(2)|浏览(123)

我正在尝试做一个低依赖性的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使用不同的主机

laawzig2

laawzig21#

resResponse,而不是文本。使用res.json()将正文文本解析为JSON。

fetch('http://localhost:64567').then(res => res.json())
6za6bjd0

6za6bjd02#

所以我想明白了,多亏了@ Unmitigate,我所需要做的就是在服务器端设置CORS,并在客户端删除mode:no-cors
在服务器中添加像这样的头文件是一种修复方法。

const headers = {
    'Access-Control-Allow-Origin': '*', /* @dev First, read about security */
    'Access-Control-Allow-Methods': 'OPTIONS, GET',
    'Access-Control-Max-Age': 2592000, // 30 days
    'Content-Type': 'application/json; charset=utf-8'
    /** add other headers as per requirement */
};

相关问题