无法通过 next-http-proxy-middleware 传递请求正文

Question

我一直在尝试使用 nextjs 创建一个前端，我在 Java 中有运行个后端。

我正在使用 npm 包 next-http-proxy-middleware，似乎我的请求正文被删除或者我使用的包不正确。

这是我的全部 ./src/api/[...all].ts 文件

import type { NextApiRequest, NextApiResponse } from 'next'
import httpProxyMiddleware from 'next-http-proxy-middleware'

type Data = {
  name: string
}

export const config = {
  api: {
    externalResolver: true,
  },
}

export default (req: NextApiRequest, res: NextApiResponse) => {
  httpProxyMiddleware(req, res, {
    target: `http://${process.env.REACT_APP_URL}`,
    changeOrigin: true,
  })
}

这是我尝试登录的代码片段，提供此数据的表单是使用 react-hook-form

构建的

const onSubmit: SubmitHandler<Inputs> = async (data: any) => {
    //console.log('username', watch('username'), 'password', watch('password'))
    const response = await axios.post(
      '/api/session',
      new URLSearchParams({
        email: data.username,
        password: data.password,
      })
    )
  }

我确实看到它正在连接到我的后端，因为我收到一个由我的 Java 程序而非 next.js 生成的错误，但它只是告诉我电子邮件为空这让我相信我的参数在翻译中丢失了

"Cannot invoke \"String.trim()\" because \"email\" is null - NullPointerException (DataManager:149 < PermissionsManager:508 < SessionResource:111 < ...)"

我能够使用 vanilla react 让它工作，所以我确定这是我在实施 next-http-proxy-middleware 时做错的事情，但我一直在用头撞墙这个有点太长了。感谢所有的帮助，谢谢！

Answer 1

我想出了解决办法，我觉得有点傻，因为没有早点意识到：

https://github.com/vercel/next.js/discussions/11036

Nextjs 带有自动正文解析器，我不得不禁用它。

export const config = {
  api: {
    externalResolver: true,
    bodyParser: false,
  },
}

无法通过 next-http-proxy-middleware 传递请求正文

Can't pass request body through next-http-proxy-middleware

javascript

reactjs

typescript

next.js

http-proxy-middleware