為什么 webpack-dev-server 不能在 React 應用程序中代理 API 調用？ 返回 404

Question

我正在使用 Express/Node 連接的 Postgres 數據庫構建一個全棧 React 應用程序。 我沒有使用 create-react-app。 為了測試 API 調用，我使用 axios 在componentDidMount()中調用 API。 服務器在端口3000上運行，反應應用程序在端口8080上運行。 我已經在 Postman 中測試了/users端點，以確保它可以正常工作。

componentDidMount() {
    // failing config for webpack dev server:
  axios.get('/api/users')
  .then((response) => {
    console.log(response)
  })
  .catch((err) => {
    console.log(err);
    console.log(err.response)
  })
  // fails:
  // axios.get('/users')
  // .then((response) => {
  //   console.log(response)
  // })
  // .catch((err) => {
  //   console.log(err);
  //   console.log(err.response)
  // })

  // works fine:
  // axios.get('http://localhost:3000/users')
  // .then((response) => {
  //   console.log(response)
  // })
  // .catch((err) => {
  //   console.log(err)
  // })
}

請注意，直接調用localhost:3000可以，但我希望能夠調用/users為生產環境做准備。 所以我在我的 webpack.config.js 文件中添加了以下內容：

  devServer: {
 contentBase: __dirname,
 hot: true,
 historyApiFallback: true,
 open: true,
 proxy: {
  '/api': 'http://localhost:3000',
  changeOrigin: true
  }
}

在運行 webpack-dev-server 時，我還需要添加其他東西來代理 API 調用嗎？ 從我看到的教程來看，在webpack.config.js中配置代理就足夠了，但我只得到 404s。

提前致謝。

Answer 1

至少對我而言，解決方案最終使用了反應環境變量，該變量將動態確定 url 指向。 我遵循了本教程： https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5 。 只需將您的開發環境指向本地主機，然后指向您的服務器所在的任何端口。