React with Node js in AWS. Connection between React and Node Issue

Question

I'm doing a project with React JS as Frontend and Node&Express as Backend.

I'm testing the connection between React and Node in local dev environment and the real server.

I'm using AWS EC2 as a server.

The problem is

1) Local Front (localhost:3000) <-> Local Back (localhost:3001) (Perfectly works)

2) Local Front (localhost:3000) <-> AWS Back (13.209.70.185:3001) (It works as well)

3) AWS Front (13.209.70.185:80) <-> AWS Back (13.209.70.185:3001) (It doesn't work!!!)

I can see the error message like this in Browser console.

'SyntaxError: Unexpected token < in JSON at position 0'

I checked those 3 cases, but I cannot find the solution of this problem.

I tried all of similar solutions in Stack Overflow and dev Communities, but because of my lack

of knowledge , I finally ask you guys to help me to solve this.

Here's some reference to diagnose my problem.

1. AWS Network Security Settings

2. React Code

Using http-proxy-middleware, I'm sending the request to server (13.209.70.185:3001)

But If the request is from 'localhost:3000' (Which is Local react), I'm sending to 'localhost:3001'. (Local Node Server)

/* setupProxy.js*/
const proxy = require("http-proxy-middleware");

module.exports = function (app) {

    app.use(proxy("/api", {
        target: "http://13.209.70.185:3001", 
        changeOrigin:true,
        ws: true,
        router: {
            'localhost:3000': 'http://localhost:3001',
        }
    }));

}

3. NodeJS Code

/// app.js ///
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var cors = require('cors');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();

// view engine setup
app.use(cors());
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
//app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/api', (req, res) => res.json({username: 'Daniel'}));


// catch 404 and forward to error handler
// app.use(function(req, res, next) {
//   next(createError(404));
// });

// error handler
// app.use(function(err, req, res, next) {
//   // set locals, only providing error in development
//   res.locals.message = err.message;
//   res.locals.error = req.app.get('env') === 'development' ? err : {};

//   // render the error page
//   res.status(err.status || 500);
//   res.render('error');
// });

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);


app.listen(port, "0.0.0.0");

module.exports = app;

4. Simplified Architecture of this project

Answer 1

I solved with using process.env.NODE_ENV variables when I use fecth function in React rather than using http-proxy-middlware.

  callApi = async () => {
        const addr = process.env.NODE_ENV == 'production' ? 'http://13.209.70.185' : 'http://localhost'
        let port='3001';
        const response = await fetch(`${addr}:${port}/api`);
        const body = await response.json();
        return body;
    }

I don't know why http-proxy-middleware didn't work, but I just used this way.

Thanks for all.

Answer 2

Try this dude..

In your local environment, the port for react app is :3000 but in AWS it is hosted at :80, so in setupProxy.js replace localhost:3000 with 0.0.0.0:80 and localhost:3001 with 0.0.0.0:3001.

You need to replace localhost with 0.0.0.0 to make sure "listen on every available network interface" happens.