时间戳

首页 > 解决方案 > 通过 2 个 API (NextJS) 发送 FormData

node.js - 通过 2 个 API (NextJS) 发送 FormData

问题描述

所以我正在向我的后端发送一些表单数据，包括图像。为了进一步混淆/保护我的后端 - 我正在学习利用 NextJS api 的好习惯（从客户端发送调用到 NextJS 服务器/api，NextJS api 充当中间人并将数据发送到后端 api）。我也在使用 Auth0 - 获取令牌的最安全方法是通过 NextJS api 本身。

当我直接从客户端到后端进行 api 调用时，我在读取后端数据时没有问题。但是，我在从 NextJS api 上的请求中获取数据（主要是图像/文件）以重新打包并发送到我的实际后端时遇到问题。我也不能在 NextJS api 中使用 FormData，所以我很困惑。

客户端提交功能：

const handleSubmit = async (e) => {
   e.preventDefault();
   const formData = new FormData();
   formData.append("title", brand.name);
   formData.append("slug", brand.slug);
   formData.append("bio", brand.bio);
   formData.append("logo", brand.logo[0]);
     const response = await fetch("/api/brands", {
       method: "post",
       body: formData,
     });
   });

NextJS api 代码（不起作用 - 我完美地获得了访问令牌，它只是发送我坚持的表单数据/文件）

import { getAccessToken, withApiAuthRequired } from "@auth0/nextjs-auth0";

export default withApiAuthRequired(async function products(req, res) {
  const { accessToken } = await getAccessToken(req, res, {});
  const response = await fetch("http://localhost:5000/brands", {
    method: "post",
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
    body: {
      title: req.body.title,
      slug: req.body.slug,
      bio: req.body.bio,
      logo: req.file,
    },
  });
  const products = await response.json();
  res.status(200);
});

标签： node.jsreactjsuploadnext.js

解决方案

在您进行的第二次 API 调用中，您可能缺少“Content-Type: multipart/form-data”。在客户端，它是从 FormData 对象中推断出来的，但在服务器端，您必须手动指定它。无论如何，我找不到在服务器上执行此操作的方法。这可能表明用例是错误的，我认为向您自己的服务器发出另一个请求是不行的。Next.js 旨在使用这个名为“withApiAuthRequired”的函数作为包装器，您可以从中调用服务或业务逻辑。无需在此处发出第二个 HTTP 请求。

推荐阅读