How can I get Axios to send a request with FormData?

Question

I'm unable to get the server that I'm calling to recognize the FormData that I'm providing when I use axios. It keeps telling me that I'm not providing the right FormData even though it works in Postman and Node native http (see below):

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;

I am able to get it working in Postman and used that to export using Node's native http, which also works:

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

I figured it out after reading through https://github.com/axios/axios/issues/318. It wasn't until near the end that Googrosh posted that he used .getHeaders(). Lo and behold, I added that to my headers too and it worked.

So updating my code, here's what it looks like:

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