ReactJS/Next.js：CRA 代理不适用于 Next.js（尝试将 API 请求路由到 Express 服务器）

Posted 2023-03-06

【中文标题】ReactJS/Next.js：CRA 代理不适用于 Next.js（尝试将 API 请求路由到 Express 服务器）

【英文标题】：ReactJS/Next.js: CRA Proxy Does Not Work With Next.js (Attempting To Route API Request To Express server)

【发布时间】：2019-02-24 19:08:09

【问题描述】：

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

在开发中，我的 React 应用程序在 port 3000 上运行，并且我有一个 Express 服务器在 port 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 服务器？

【参考方案1】：

好的，所以我想通了。您可以使用 http-proxy-middleware 为 Express 创建 Node.js 代理

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

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

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

【讨论】：

您能否进一步澄清您的答案？您是否将中间件添加到后端？还是到 nextjs？

到自定义的 nextjs server.js 文件

任何寻找更多资源的人：Next.js repo 上有一个issue 用于上下文，官方example Next.js app 实现了这个解决方案。

如果我有一个完全独立的后端文件夹，它在端口 = 8080 上运行 API。我应该怎么做才能使用路径 /api 从我的 nextjs 前端向它发出 api 请求？