Angular image not served properly from nodejs backend - node.js

Question

I want to serve a image from my nodejs backend and show it in frontend, my backend running at 8081 port and frontend at 8080. I can see images in http://localhost:8081/image.JPG but in frontend I am getting 404 as it is looking for http://localhost:8081/image.JPG.
var express = require('express');
var cors = require("cors");
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
global.__basedir = __dirname;
app.use(express.static(__dirname + '/resources/static/assets/uploads/'));
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();
});
const db = require('./app/config/db.config');
app.use(cors({origin: 'http://localhost:8080'}));
// force: true will drop the table if it already exists
db.sequelize.sync({force: false}).then(() => {
console.log('Drop and Resync with { force: false }');
});
require('./app/routers/upload.router.js')(app);
// Create a Server
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("App listening at http://%s:%s", host, port)
})
i can see image when i query in browser as it is looking for 8081 port
frontend looking for port 8080 so getting below error--
someone please suggest me a solution. I am not getting any clue. Thank you.

Answer 1

An approach that you can take is to use proxy config provided by Angular like below:
{
"/api/assets": {
"target": "http://localhost:8081",
"secure": false
}
}
Now, from the frontend when you hit this URL: http://localhost:8080/api/assets/image.JPG it will proxy to http://localhost:8081/api/assets/image.JPG
your image tag will look like <img src="/api/assets/image.JPG">
More on Proxy config & how to configure: https://angular.io/guide/build#proxying-to-a-backend-server