'Backend Api error (502 bad gateway) from React Cilent to Express Server during deployment
I am trying to deploy my app on digital ocean (react-express app). During deployment, I used to make my requests to the following endpoint "http://localhost:8000/backend/*". Now that I am deploying my app on an Nginx server my frontend seems to be working fine all my API requests are throwing errors. The following are the error scenarios,
on endpoint "http://localhost:8000/backend/*" I get
GET net::ERR_CONNECTION_REFUSED
on changing the endpoint to "http://example.com/backend/*" I get a 502 Nginx Bad gateway
error.
I am not sure if it is because of my endpoint or because of some Nginx configuration error .
Any help is appreciated. Thanks in advance. I am also adding my server code and Nginx config file screenshot for reference
import dotenv from 'dotenv';
import helmet from 'helmet';
dotenv.config();
import cors from 'cors';
import express from 'express';
import updates from './routes/updates.js';
import userAuth from './routes/authenticate.js';
import users from './routes/users.js';
import orders from './routes/orders.js';
import contact from './routes/contact.js';
import errorhandler from './routes/error.js';
import services from './routes/services.js';
import cookieParser from 'cookie-parser';
import { authenticateUser } from './controller/authenticate.js';
import addresses from './routes/addresses.js';
import payments from './routes/payments.js';
import path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const app = express();
app.use(cors({ origin: process.env.WEBSITE_URL, credentials: true }));
app.use(
helmet({
contentSecurityPolicy: {
useDefaults: true,
directives: {
scriptSrc: [
"'self'",
'razorpay.com',
'*.razorpay.com',
'fontawesome.com',
'*.fontawesome.com',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',
],
imgSrc: ["'self'", 'data:'],
connectSrc: ["'self'", '*.fontawesome.com'],
manifestSrc: process.env.SERVER_URL,
},
},
})
);
app.use(express.json());
app.use(
express.urlencoded({
extended: false,
})
);
app.use(cookieParser());
const port = process.env.PORT || 8000;
app.use('/backend/addresses', authenticateUser, addresses);
app.use('/backend/updates', updates);
app.use('/backend/user', authenticateUser, users);
app.use('/backend/authenticate', userAuth);
app.use('/backend/orders', authenticateUser, orders);
app.use('/backend/contact', contact);
app.use('/backend/payments', payments);
app.use('/backend/services', services);
app.use(errorhandler);
app.listen(port, () => console.log('Server is running on port ' + port));
Nginx config
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|