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.
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/"
}
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.
The correct version will be.
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.