时间戳

首页 > 解决方案 > 状态码：Heroku 上托管的 React 前端中不允许出现 405

node.js - 状态码：Heroku 上托管的 React 前端中不允许出现 405

问题描述

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

当我使用托管在 Heroku 中的同一台服务器和托管在我的桌面中的前端时，它工作正常。

客户端：https ://calm-fjord-20606.herokuapp.com/login 服务器：https ://recorder-server-pkr.herokuapp.com/user/login

我已经浏览了这里和 GitHub 中提供的许多解决方案，但没有一个能澄清我的疑问。

/server.js - 服务器

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

{
  "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"
  ]
}

任何帮助将不胜感激。谢谢

标签： node.jsreactjsheroku

解决方案

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

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

推荐阅读