如何让Axios使用FormData发送请求？

Question

当我使用axios时，我无法让我正在调用的服务器识别我提供的FormData。它一直告诉我尽管在Postman和Node原生http中可以使用（如下所示），但我没有提供正确的FormData：

import { Router } from "express";
import axios from "axios";
import * as FormData from "form-data";

const router = Router();
const cookieHeader = {
    Cookie: "XXX",
};

router.get("/", async (_req, res) => {
    try {
        const formData = new FormData();

        formData.append("key1", JSON.stringify(["value1"]));
        formData.append("key2", "value2");
        formData.append("key3", "value3");

        const response = await axios.post("https://xxx", formData, { headers: { "Content-Type": "multipart/form-data; boundary=--------------------------811161660471543283806813" } });

        res.send(response.data);
    } catch (error) {
        console.log(error);
    }
});

module.exports = router;

我能够在Postman中让它工作，并使用Node的本地http导出，这也是有效的:

import { Router } from "express";
import { https } from "follow-redirects";

const router = Router();

router.get("/", () => {
    const options = {
        method: "POST",
        hostname: "xxx",
        path: "/xx/xxx",
        headers: {
            "Content-Type": "multipart/form-data; boundary=--------------------------811161660471543283806813",
            Cookie: "xxx",
        },
        maxRedirects: 20,
    };

    const req = https.request(options, (res: any) => {
        const chunks: any[] = [];

        res.on("data", (chunk: any) => {
            chunks.push(chunk);
        });

        res.on("end", () => {
            const body = Buffer.concat(chunks);
            console.log(body.toString());
        });

        res.on("error", (error: any) => {
            console.error(error);
        });
    });

    const postData = `------WebKitFormBoundary7MA4YWxkTrZu0gW\nContent-Disposition: form-data; name=\"key1\"\n\n[\"value1\"]\n------WebKitFormBoundary7MA4YWxkTrZu0gW\nContent-Disposition: form-data; name=\"key2\"\n\nvalue2\n------WebKitFormBoundary7MA4YWxkTrZu0gW\nContent-Disposition: form-data; name=\"key3\"\n\nvalue3\n------WebKitFormBoundary7MA4YWxkTrZu0gW--`;

    req.setHeader("content-type", "multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW");

    req.write(postData);

    req.end();
});

module.exports = router;

- Uy Hoang

Answer 1

通过阅读https://github.com/axios/axios/issues/318，我解决了这个问题。直到Googrosh发布使用.getHeaders()的方案后，我才在最后时刻找到答案，添加了这个方案到我的headers中，问题就得到了解决。

所以，我更新了我的代码，现在它看起来是这样的：

const response = await axios.post("https://xxx", formData, { headers: formData.getHeaders() });

- Uy Hoang

---

如何在浏览器中实现这个功能？formData.getHeaders()在那里不起作用！ - Nikita Fuchs

Answer 2

onst formUrlEncoded = x =>
   Object.keys(x).reduce((p, c) => p + `&${c}=${encodeURIComponent(x[c])}`, '')

var axios = require("axios");

axios({
  url: 'https://login.xyz.com/oauth/v2/token',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  data: formUrlEncoded({
     client_id: '***',
     client_secret: '***',
     grant_type: 'authorization_code',
  })
})
.then(function(response) {
  console.log(response.data)
})
.catch(function(error) {
  console.log(error)
})

- Belayet Hossain

---

请不要仅仅发布代码作为答案，还要提供解释您的代码是如何解决问题的。带有解释的答案通常更有帮助和更高质量，并且更有可能吸引赞同。 - Tyler2P

onst是什么？在发布前进行了测试或检查吗？还有，@Tyler2P关于仅代码答案的评论。 - Mr. Lance E Sloan