状态码:405在Heroku上托管的React前端中不允许 [英] Status Code: 405 Not Allowed in React frontend hosted on Heroku

问题描述

我已经在React前端制作了一个应用程序，并表示为后端框架.这些都可以在我的本地计算机上正常工作，并且当我在Heroku中托管服务器和客户端时，它们都已正确部署，但是当我尝试登录时却出现405:不允许错误.

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.

当我使用Heroku托管的同一台服务器，而前端托管在我的台式机上时，则工作正常.

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 服务器: https://recorder-server-pkr.herokuapp.com/user/login

client : https://calm-fjord-20606.herokuapp.com/login server : https://recorder-server-pkr.herokuapp.com/user/login

我已经遍历了这里和GitHub中提供的许多解决方案，但是没有一个可以澄清我的疑问.

I have gone through many of the solutions provided here and in GitHub but none of them clarified my doubt.

/server.js-服务器

/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-来自客户端

/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

推荐答案

使用 cors 中间件在服务器上.

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')
})

这篇关于状态码:405在Heroku上托管的React前端中不允许的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！