React + Express：Axios 在 Heroku 上返回 405 Method Not Allowed

Question

我正在开发一个带有 React 前端和 Express API 的应用程序，它们托管在同一台服务器上。

它在本地运行良好，但一旦我将它部署到 Heroku，从前端到后端的每个请求都会返回 405: Method Not Allowed。我一直在寻找答案，但大多数都指向using CORS，我已经这样做了。因此，我不知道我的问题是来自构建、滥用 axios 还是来自错误的 express.js 配置。

我也尝试过添加 react 代理 URL，但并没有解决问题。

目录结构如下：

├── Express
|   └── server.js
├── React
|   └── App.js
├── buildScript.js
└── package.json

这是我的 server.js 文件：

const express = require('express')
const bodyParser = require('body-parser')
const compression = require('compression')
const cors = require('cors')
const helmet = require('helmet')
const path = require('path');

// Import routes
const poisRouter = require('./routes/pois-route')
const autocompleteRouter = require('./routes/autocomplete-route')

// Set default port for express app
const PORT = process.env.PORT || 4001

const app = express()

app.use(cors())
app.use(helmet())
app.use(compression())
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

// Serve static files from the React App
app.use(express.static(path.join(__dirname, 'build')));

// Implement Poi & Autocomplete routes
app.use('/pois', poisRouter)
app.use('/autocomplete', autocompleteRouter)

// Wildcard to send back to React
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});


// Start express app
app.listen(PORT, function() {
  console.log(`Server is running on: ${PORT}`)
})

来自 React 前端的示例请求，给我一个 405 错误：

  const fetchPoisFromAutocomplete = async () => {
    // Send GET request to 'autocomplete/fetch' endpoint

    axios
      .get('/autocomplete/fetch', {
        latitude: latitude,
        longitude: longitude
      })
      .then(response => {
        // Update the pois state
        console.dir(response.data)

      })
      .catch(error => console.error(`There was an error retrieving the poi list: ${error}`))
  }

fetchPoisFromAutocomplete();

Package.json 脚本：

  "scripts": {
    "build": "node ./buildScript",
    "build-front": "react-scripts build",
    "start": "node app/server.js",
    "start-server": "nodemon app/server.js",
    "start-front": "react-scripts start",
    "dev": "concurrently \"npm run start-server\" \"npm run start-front\" --kill-others --kill-others-on-fail",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "heroku-postbuild": "react-scripts build"
  },

构建脚本：

const fs = require('fs')
const fse = require('fs-extra')
const childProcess = require('child_process')

if (fs.existsSync('./build')) {
  fse.removeSync('./build')
}

childProcess.execSync('react-scripts build', { stdio: 'inherit' })

fse.moveSync('./build', './server/build', { overwrite: true })

Answer 1

尝试将端点的完整 url 放在 heroku 上：

.get('/autocomplete/fetch', {

即

.get('https://your-heroku-app.herokuapp.com/autocomplete/fetch'

看看这是否有效。我怀疑您的反应应用程序实际上是在尝试调用与托管 API 的位置不同的 URL。

Answer 2

在堆栈溢出中，有人遇到了这个问题，请参见下面的其中一个 cmets，不确定是否是同一个问题。

应用程序在 heroku 服务器上。我已联系支持人员，他们回复：“create-react->app-buildpack 使用 heroku/static buildpack，而后者又使用 nginx Web 服务器。>不幸的是，nginx 不允许来自静态页面的 POST 调用。您需要进行一个 >GET 请求在这里。”

I am getting 405 method not allowed

不确定是否是您的情况，但请确保您没有将 Build 文件夹上传到您的存储库，因为一旦您将其上传到 heroku，这将破坏它。