Right now I'm trying to build an app as coding training, which involves communication between two different local hosts, whose port numbers are 8080 and 3000.
8080 is the one that is responsible for handling the main functionalities like displaying the content, taking inputs from the users etc, and 3000 is the one that functions as API server.
It didn't seem like some of the requests from 8080 were properly handled by 3000, so I thought of examining how the 3000 (the local API server) works by itself.
Then I began to suspect if this local API server (3000) is partially buggy, because its post
doesn't seem to be working while its get
does seem to be working.
Here is the configuration.
[api.js]
const fs = require('fs');
const path = require('path');
const express = require('express');
const api = express();
const apiUrl = process.env.URL || 'http://localhost';
const apiPort = 3000;
api.use(express.json());
api.get('/api/feed/get' , (req, res) => {
console.log('Displaying the result of api.get: ');
let feedFile = path.resolve(__dirname, '../feed.json');
res.type('json');
res.sendFile(feedFile);
});
api.post('/api/feed/post' , (req, res) => {
let feedFile = path.resolve(__dirname, '../feed.json');
let feedContent = JSON.parse(fs.readFileSync(feedFile));
let feedPosted = req.body;
let feedJson = '';
console.log('/api/feed/post:', feedPosted);
feedContent.push(feedPosted);
feedJson = JSON.stringify(feedContent);
fs.writeFileSync(feedFile, feedJson);
res.type('json');
res.sendFile(feedFile);
});
api.listen(apiPort, () => {
console.log(`API server running at ${apiUrl}:${apiPort}`);
});
I installed express
and added the line
"api":"node ./src/api.js"
in the package.json
file to update the configuration, so now it's defined as
........
........
"private": true,
"scripts": {
"start": "concurrently --kill-others \"npm run app\" \"npm run api\"",
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"api":"node ./src/api.js"
},
"dependencies": {
"@dongido/vue-viaudio": "^0.3.2",
"axios": "^0.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"fs": "0.0.1-security",
"vue": "^2.5.11",
"vue-axios": "^2.1.4",
"vue-router": "^3.0.7"
},
..........
..........
And when I ran the local API server by npm run api
, the following was the result when I opened a new tab and directly entered http://localhost:3000/api/feed/get
as the URL.
[
{
"avatar": "/avatar/avatar-colshacol.jpg",
"username": "Colton Colcleasure",
"handle": "@colshacol",
"timestamp": 1541851080000,
"content": "",
"media": {
"type": "image",
"url": "/media/media-pony-pooping-rainbow-icecream.gif"
},
"actions": {
"replies": 2,
"rekweets": 41,
"likes": 172
}
},
{
"avatar": "/avatar/dankotaru_ketsui.jpeg",
"username": "安西先生",
"handle": "@ホッホッホッホ",
"timestamp": 9031851080000,
"content": "最後まで希望を捨てちゃいかん。諦めたら、そこで試合終了だよ。…………聞こえんのか?あ?…………私だけかね?まだ勝てると思ってるのは…。",
"actions": {
"replies": 4,
"rekweets": 31,
"likes": 184
}
},
.........
.........
.........
]
as you can see, the JSON file is properly fetched.
But when I enter http://localhost:3000/api/feed/post
instead, I only get the response Cannot GET /api/feed/post
.
What could be the reason behind this? And what would be the solution?