Server not receiving HTTP requests from Client

Question

First a quick preface I think may be helpful: I am new to splitting my client and server into separate web apps. My previous apps have all had my server.js at the root level in my directory and the client (typically a create-react-app) in a /client folder.

What I wanted to do: Host a single express.js server on the web which multiple other web applications could make requests to.

I did the first part using an express server and aws elastic beanstalk.

server.js

require('dotenv').config()
const express = require('express');
const app = express();
const cors = require('cors');
const PORT = process.env.PORT || 5000;
const Mongoose = require('mongoose');
const { Sequelize } = require("sequelize");

//ROUTES
const APIUser = require('./routes/api/mongo/api-user');
more routes...

//INITIATE DATA MAPPING CONNECTIONS START
Mongoose.connect(
    process.env.MONGO_URI,
    { useNewUrlParser: true, useUnifiedTopology: true },
    console.log("connected to MongoDB")
);

const Postgres = new Sequelize(process.env.PG_CONN_STRING);

try {
    Postgres.authenticate()
        .then(console.log("connected to Postgres"));
} catch {
    console.log("Postgres connection failed")
}
//INITIATE DATA MAPPING CONNECTIONS END

//middleware
app.use(cors())
more middleware...

//home route
app.get('/api', (req, res) => {
    console.log('RECEIVED REQ to [production]/api/')
    res.status(200).send('models api home').end();
})

//all other routes
app.use('/api/user', APIUser);
more route definitions...

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

The log file for successful boot up on aws: https://imgur.com/vLgdaxK

At first glance it seemed to work as my postman requests were working. Status 200 with appropriate response: https://imgur.com/VH4eHzH

Next I tested this from one of my actual clients in localhost . Here is one of my react client's api util files where axios calls are made to the backend:

import { PROXY_URL } from '../../config';
import { axiosInstance } from '../util';

const axiosProxy = axios.create({baseURL: PROXY_URL}); //this was the most reliable way I found to proxy requests to the server

export const setAuthToken = () => {
    const route = "/api/authorization/new-token";
    console.log("SENDING REQ TO: " + PROXY_URL + route)

    return axiosProxy.post(route)
}

export const authorize = clientsecret => {
    const route = "/api/authorization/authorize-survey-analytics-client";
    console.log("SENDING REQ TO: " + PROXY_URL + route)
    
    return axiosProxy.post(route, { clientsecret })
}

Once again it worked... or rather I eventually got it to work: https://imgur.com/c2rPuoc

So I figured all was well now but when I tried using the live version of the client the request failed somewhere.

in summary the live api works when requests are made from postman or localhost but doesn't respond when requests are made from a live client https://imgur.com/kOk2RWf

I have confirmed that the requests made from the live client do not make it to the live server (by making requests from a live client and then checking the aws live server logs).

I am not receiving any Cors or Cross-Origin-Access errors and the requests from the live client to the live server don't throw any loud errors, I just eventually get a.net::ERR_CONNECTION_TIMED_OUT. Any ideas where I can look for issues or is there more code I could share?

Thank you!

Answer 1

Add a console.log(PROXY_URL) in your client application and check your browser console if that's logged correctly.

If it works on your local client build, and through POSTMAN, then your backend api is probably good. I highly suspect that your env variables are not being set. If PROXY_URL is an emplty string, your axios requests will be routed back to the origin of your client. But I assume they have different origins since you mention that they're separate apps.

Remember environment variables need to prefixed with REACT_APP_ and in a production build they have to be available at build time (wherever you perform npm run build )