如何讓 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;

Answer 1

我在閱讀https://github.com/axios/axios/issues/318后想通了。 直到接近尾聲，Googrosh 才發布他使用了.getHeaders() 。 瞧，我也將它添加到我的標題中並且它起作用了。

所以更新我的代碼，這是它的樣子：

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

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)
})