Server not receiving HTTP requests from Client-CodePudding

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!

CodePudding user response：

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)

CodePudding user response：

Well let me put it this way: I was confused why it wasn't working and I'm still a bit perplexed as to why it suddenly is now.

Looking at the base facts I had established that the backend server was working properly via postman and a local client. In my client I did everything I could to ensure that requests were made to the right address by not relying soley on declaring a proxy in package.json but rather by using the axios.create() method and explicitly setting the baseURL to my proxy server. I also logged the requests right before they were sent and in both the local and live versions the client seemed to be using the correct address. The only difference was that in my local environment I was getting a response whereas in the live one I was timing out.

I wish I had a better answer for you all but the best I can think of was that I hadn't properly run npm run build prior to deploying the latest version of the live client. In any case after adding some more console logging for debugging purposes, running npm run build and deploying to elasticbeanstalk the live client decided to start working.

I guess all the time I put into this was finally deemed a worthy sacrifice by the js gods :P ...probably not but thats what i'm going with for now, if I figure out exactly why later i'll update this