Getting XMLHttpRequest error from HTTP GET request on unformatted JSON - node.js

Question

I'm trying to get JSON-data via HTTP from my Dart/Flutter function:
Future<List<News>?> getNews() async {
var client = http.Client();
var uri = Uri.parse('http://localhost:3000/news');
var response = await client.get(uri);
if (response.statusCode == 200) {
var jsonFile = response.body;
try {
return newsFromJson(jsonFile);
} catch (e) {
print(e);
}
}
return null;
}
The Json-File looks like this:
{
"news": [
{
"id": 0,
"title": "Test",
"text": "Test",
"buttonText": "Test",
"source": "Test",
"showButton": false,
"openFile": false,
"openWebsite": true
},
{
"id": 1,
"title": "Test",
"text": "Test",
"buttonText": "Test",
"source": "Test",
"showButton": false,
"openFile": false,
"openWebsite": true
}
]
}
When I start the following Script for the server that is going to provide the data, everything works fine but the json-data is NOT formatted when I call it in the browser:
const express = require('express');
const fs = require('fs');
const app = express();
app.get('/news', (req, res) => {
console.log('Received request');
fs.readFile('data.json', (err, data) => {
if (err) throw err;
const news = JSON.parse(data).news;
res.json(news);
});
});
app.listen(3000, () => {
console.log('Server listening on port 3000');
});
The request from my dart code reaches the NodeJS-Script but ends with the mentioned XMLHttpRequest error. And here comes the interesting thing: When I use the tool json-server (https://github.com/typicode/json-server) with the same json-file, everything IS formatted when calling the url in browser and my Flutter/Dart codes work without any error. So in conclusion: The NodeJS-Script is working like the json-server tool. The only difference is, that the json provided by the NodeJS script isn't formatted in the browser which might causes the error.
Where is the problem?
Could be useful
List<News> newsFromJson(String str) =>
List<News>.from(json.decode(str).map((x) => News.fromJson(x)));
Error: XMLHttpRequest error.
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 299:10 createErrorWithStack
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 341:28 _throw
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/core/errors.dart 116:5 throwWithStackTrace
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1378:11 callback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/schedule_microtask.dart 40:11 _microtaskLoop
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/schedule_microtask.dart 49:5 _startMicrotaskLoop
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15 <fn>

Answer 1

Express.js will try to be compact about the data it sends, rather than pretty.
Format it explicitly:
res.set('Content-Type', 'application/json')
res.send(JSON.stringify(news, undefined, 2));
If you want the JSON data to be formatted exactly as it is in the file, and send the whole file, not a specific part of the JSON, just don't parse it:
res.set('Content-Type', 'application/json');
res.send(data);