Status Code: 405 Not Allowed in React frontend hosted on Heroku - node.js

Question

I have made an app in react frontend and express as backend framework. These both are working fine in my local computer and when I have hosted Both server and client in Heroku they are deployed properly but when I am trying to login I am getting 405: Not allowed error.
When I am using the same server hosted in Heroku with the frontend hosted in my desktop it is working fine.
client : https://calm-fjord-20606.herokuapp.com/login
server : https://recorder-server-pkr.herokuapp.com/user/login
I have gone through many of the solutions provided here and in GitHub but none of them clarified my doubt.
/server.js - server
const express = require("express");
var app = express();
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const db = require("./config/keys").mongoURI;
const passport = require("passport");
const cors = require("cors");
mongoose
.connect(db, { useNewUrlParser: true })
.then(() => {
console.log("Mongoose connected");
})
.catch(err => console.log(err));
//body-parser
app.use(bodyParser.urlencoded({ extended: true }));
// parse application/json
app.use(bodyParser.json());
//passport middleware
app.use(passport.initialize());
var publicDir = require("path").join(__dirname, "/public");
app.use(express.static(publicDir));
//routes
require("./routes/api/user")(app);
require("./routes/verifyaccount")(app);
require("./routes/api/file")(app);
app.get("/", cors(),(req, res) => {
res.json({
post: {
"/user/register": "to register",
"/user/login": "to login",
"/file": "to upload file",
"/verifyaccount/email": "to verify email using otp",
"/verifyaccount/sms": "to verify sms otp",
"/sendVerificationCode": "to reset password or resend verification code",
"/reset/:secretToekn": "forgot password"
},
get: {
"/current": "current user",
"/file": "to fetch file"
}
});
});
//passport config
require("./config/passport")(passport);
const port = process.env.PORT || 5000;
app.listen(port, process.env.IP , () => {
console.log(`Server started at port ${port}`);
});
/package.json - from client
{
"name": "light-bootstrap-dashboard-react",
"version": "1.2.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "3.3.7",
"chartist": "^0.10.1",
"classnames": "^2.2.6",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.4",
"griddle-react": "^1.0.0",
"history": "^4.7.2",
"html-to-draftjs": "^1.4.0",
"jquery": "^3.4.1",
"jspdf": "^1.5.3",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"mdbreact": "^4.15.0",
"moment": "^2.24.0",
"node-sass": "4.6.1",
"node-sass-chokidar": "0.0.3",
"npm-run-all": "4.1.2",
"react": "^16.8.4",
"react-bootstrap": "0.32.1",
"react-bootstrap-table-next": "^3.0.1",
"react-chartist": "^0.13.1",
"react-dom": "^16.8.4",
"react-draft-wysiwyg": "^1.13.2",
"react-google-maps": "9.4.5",
"react-notification-system": "0.2.17",
"react-redux": "^6.0.1",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.1.8",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"
},
"scripts": {
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "https://recorder-server-pkr.herokuapp.com",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Any help will be appreciated. Thank you

Answer 1

Use cors middleware on server.
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
app.get('/products/:id', function (req, res, next) {
res.json({msg: 'This is CORS-enabled for all origins!'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})

Answer 2

There are two ways:
You must enable cors in Back-end. (You can search Google as cors express )
You can use proxy in Front-end