SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data on React app

Question

I have a React app that uses express in the backend. I try to get from my db a list of messages through a fetch API call.

The code in the Frontend:

App.js

getMessages = () => {
fetch('/api/mess')
.then(res => res.json())
.then(res => {
  var Messages = res.map(r => r.messages);
  this.setState({ Messages });
});

};

The code in the backend:

api/mess.js

var express = require('express');
var Mess = require('../queries/mess');

var router = express.Router();

router.get('/', (req, res) => {
        Mess.retrieveAll((err, messages) => {
        if (err)
            return res.json(err);
        return res.json(messages);
    })
});

router.post('/', (req, res) => {
    var message = req.body.message;
    Mess.insert(message, (err, result) => {
        if (err)
            return res.json(err);
        return res.json(result);
    });
});

module.exports = router;

queries/mess.js

const db = require('../database');

class Mess {
    static retrieveAll(callback) {
        db.query('SELECT * FROM mess;', (err, res) => {
            if (err.error) 
                return callback(err);
            callback(res); 
        });
    }

    static insert(mess, callback) {
        db.query('INSERT INTO mess (messages) VALUES ($1)', [mess], (err, res) => {
            if (err.error)
                return callback(err);
            callback(res);
        });
    }
}

module.exports = Mess;

index.js

const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');

var db = require('./database');

const ENV = process.env.NODE_ENV;
const PORT = process.env.PORT || 3011;

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.use('/api/mess', require('./api/mess'));
app.use('/api/roles', require('./api/roles'));

app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}...`);
});

module.exports = app;

I get this error on my Frontend:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

I have tried and changed every response and request to use either JSON.parse or .json and I get the same message no matter what.

When I use my browser and go to the api channel I get a correctly formatted JSON with the contents of the db.

Did I miss something?

EDIT:

The stack trace is super minimal:

When I try:

getMessages = () => { fetch('/api/mess') .then(res => console.log(res)); };

I get this object:

Answer 1

The problem is that the backend is at PORT 3011 and the api call is made to PORT 3000 from the frontend.

I need to have a proxy to point from the forntend to the backend port.

I need to add inside client/package.json (Frontend) this line:

"proxy": "http://localhost/3011"