javascriptnode.jsreactjsexpressproxy-server

proxy server working in one case and failed in another case


So i am working on eCommerce website in react and Node. coming to the point, at the time of login the proxy works totally fine but when i made get request to API it shows an error. I spent 2 days resolving this but at last came here with the hope to get the answer. This is error i got

brief description of request

My server.js file

const express = require ( 'express');
const bodyParser = require('body-parser');
const app = express();
const {sequelize} = require('./models')
const  cookieParser = require("cookie-parser");
app.use(express.json());
// app.use(express.urlencoded());

// app.use(bodyParser.json());
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  extended: true
}));
const FarmerRoutes = require('./Routes/Farmer'); // Finished
const AdminRoutes = require('./Routes/Entities'); //  Finished
const Ecommerce = require('./Routes/Ecommerce'); // Finished
const upload = require('./Controllers/ImageManagement')
app.use(cookieParser())

app.use(express.static('backend/uploads'))
app.get('/', (req, res) => {
res.send(" CattleTalk Api is active and running...")
})

app.use('/api/ecommerce',Ecommerce);
app.use('/api/admin',AdminRoutes); 
app.use('/api/farmers',FarmerRoutes);




app.listen(5002,async()=>{
    console.log("The app listening at 5002");
    try {
        await sequelize.authenticate();
        console.log('Database Connection has been established successfully.');
      } catch (error) {
        console.error('Unable to connect to the database:', error);
      }
});

My package.json at frontend looks like this

{
  "name": "frontend",
  "secure":false,
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@popperjs/core": "^2.9.1",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.2",
    "formik": "^2.2.9",
    "js-cookie": "^3.0.1",
    "react": "^17.0.1",
    "react-bootstrap": "^2.0.0-alpha.2",
    "react-bootstrap-sidebar": "^0.0.1",
    "react-dom": "^17.0.1",
    "react-icons": "^4.2.0",
    "react-router": "^5.2.0",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.1",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:5002/"
}

Solution

  • After hours of exploring the internet i couldn't get the answer of my problem, but debugging the code i found the problem. Actually it was one extra trailing slash in URL which made it to misbehave. I was like this before.

    Wrong Link

    enter image description here

    The correct version will be.

    correct Link

    enter image description here

    EXTRA NOTE: All those who have not found the solution from here should move forward to this link and look for trailing slash if found in your current URL, for making successful proxy you need to eliminate that trailing slash at the end of URL.