ReactJS/Next.js：CRA 代理无法与 Next.js 一起使用（尝试将 API 请求路由到 Express 服务器）

Question

我目前正在升级普通 React 应用程序以使用 Next.js（版本 7.0.0）。该应用程序最初是使用 Create-React-App 构建的，并利用 CRA 服务器内置的代理。

在开发过程中，我的 React 应用程序在端口 3000上运行，我有一个 Express 服务器在端口 5000上运行。在添加 Next.js 之前，我一直在package.json文件中使用代理对象将 API 请求路由到服务器。

API请求：

const res = await axios.get('/api/request')

package.json 中的代理对象：

"proxy": {
  "/api/*": {
    "target": "http://localhost:5000"
  }
}

这一直工作得很好，但使用 Next.js 我现在收到一个错误：

GET http://localhost:3000/api/request 404 (Not Found)

^ 这应该指向 locahost:5000 （我的服务器）

有谁知道我如何能够将 API 请求从 React/Next.js 客户端路由到在不同端口上运行的 Express 服务器？

Answer 1

好的，所以我已经弄清楚了。您可以使用http-proxy-middleware为 Express 创建 Node.js 代理

然后，您可以配置目标选项以将请求代理到正确的域：

const proxy = require('http-proxy-middleware')

app.use('/api', proxy({ target: 'http://localhost:5000', changeOrigin: true }));