Axios POSTリクエストのbodyがおかしい

Question

実現したいこと

ElectronアプリでWeb APIにAxiosのPOSTを投げたい
送りたいデータはCSVでmultipart/form-dataの形式でPOSTする必要があります。（POST先のサーバ指定）

困っていること

AxiosでのPOSTのHTTPリクエストの形が求める形にならず困っています。
データはform-dataライブラリを使って設定しています。

求める形と現状

この形にしたい

↓ARC(HTTPリクエストを送るソフト)で送って期待通りに動作した時のWiresharkのログ

MIME Multipart Media Encapsulation, Type: multipart/form-data, Boundary: "--------------------------332315644361122399636534"
    [Type: multipart/form-data]
    First boundary: ----------------------------332315644361122399636534\r\n
    Encapsulated multipart part:  (application/vnd.ms-excel)
        Content-Disposition: form-data; name="aaaaabc3332"; filename="putjobCSV.csv"\r\n
        Content-Type: application/vnd.ms-excel\r\n\r\n
        Media Type
            Media type: application/vnd.ms-excel (189 bytes)
    Last boundary: \r\n----------------------------332315644361122399636534--\r\n

現状

↓Axios POSTを使った時のWiresharkのログ
※1

MIME Multipart Media Encapsulation, Type: multipart/form-data, Boundary: "--------------------------317363921338863873185030"
    [Type: multipart/form-data]
    Data (17 bytes)
        Data: 5b6f626a65637420466f726d446174615d
        [Length: 17]

↓form-dataライブラリのsubmitを使った時のログ（Axiosのセッション情報が引き継げないためセッションエラー）
※2

MIME Multipart Media Encapsulation, Type: multipart/form-data, Boundary: "--------------------------110980606495398123589222"
    [Type: multipart/form-data]
    First boundary: ----------------------------110980606495398123589222\r\n
    Encapsulated multipart part:  (text/csv)
        Content-Disposition: form-data; name="eeeeleleele"; filename="electron"\r\n
        Content-Type: text/csv\r\n\r\n
        Media Type
            Media type: text/csv (189 bytes)
    Last boundary: \r\n----------------------------110980606495398123589222--\r\n

ソースコード

const fs = require('fs').promises;
const axios = require('axios').default;
const FormData = require('form-data');
import { AxiosResponse, AxiosError } from 'axios';

//  ******   処理部分を抜粋 ********
  let csvFile: any;
  promiseFileOpen(file)
    .then(res => {
      console.log('AAA ## ' + res);
      csvFile = res;

      let url = '';
      url += config.URL+ 'post';
      console.log(url);

      const formData = new FormData();
      formData.append('foo', csvFile, {
        filename: 'myCSV',
        contentType: 'text/csv',
      });

      //※2の部分
      formData.submit(url, (err: any, res: any) => {
        if (err) console.log('formdata submit Error');

        console.log(res.statusCode);
      });

      //※1の部分
      (async () => {
        await axios
          .post(url, formData, {
            headers: {
              // 'content-type': 'multipart/form-data',
              ...formData.getHeaders(),
            },
          })
          .then((response: AxiosResponse) => {
            console.log('AxiosResponse->' + response.data);
          })
          .catch((error: AxiosError) => {
            console.log('axios error =>' + error);
          });
      })();
    })
    .catch(err => console.log('Error'));

丸一日以上格闘していますが解決できていません。。
よろしくお願いいたします

Comments

[plasticgrammer]

追加情報として、axios.postに渡している formData.getHeaders() の内容を記載頂けないでしょうか。

[Reiz]

console.log(formData.getHeaders());としても[object Object]としか表示されないのですが、
form.getHeaders()の有無でWiresharkではMIMEタイプの項目の有無が変化しました。
MIMEタイプがなくなる代わりに以下の項目が表示されました。
```
HTML Form URL Encoded: application/x-www-form-urlencoded
Form item: "[object FormData]" = ""
Key: [object FormData]
Value:
```

[plasticgrammer]

回答ありがとうございます。
あまり詳しくないのですが、FormDataがブラウザ側で使用できるものと同じものであれば、以下のコードで確認できるかもしれません。
console.log(...formData.entries());

[Reiz]

レスありがとうございます。
axios.postの手前に追記して実行してみたのですが、
「TypeError: formData.entries is not a function」となってしまい確認できませんでした。（yyyyも表示されず）
form-dataがnpmのライブラリなのでブラウザと同一ではないのが原因だと思います。

```
console.log('xxxxxxx'); //追記
console.log(...formData.entries());
console.log('yyyyyyy');
//※1の部分
(async () => {
```

[plasticgrammer]

確認ありがとうございました。エラーとのこと承知しました。

「axiosに引き渡しているヘッダ情報の違いにより問題が生じているのかも」と思い質問させて頂きました。
何かわかりましたら追記くださいますようお願いいたします。

Answer 1

Axiosではmultipart/formdataは送れないようです。
AxiosのGithubのissuesに情報がありました。
代替のライブラリとしてGithubのページではrequest-promiseの名前が挙がっていますが、
2019年時点で使用非推奨になっているため、got、superagentと試して結果superagentで目的を達成しました。

ご回答くださった方々ありがとうございました。

Comments

[EiichiCat]

相手のAPIによるのかもですが、似た現象に困っておりました。
代案のGOTに変えることで、解決しました。
助かりました🙏

Answer 2

npm モジュールの form-data は ブラウザ実装を偽装したものです。
（npm のライブラリはNodeJS標準実装を活用したユーザ定義オブジェクトが公開されたものに過ぎない）

OSSの本質は、「コードを読んで使えそうなら使ってください」ですので、作者が公開する Usage: を確認し、似たような使い方を試してみるのが一番です。

ご質問の //※1の部分 が、表題の axios との連携事例になると思います。

• gitHub form-data

axios() の第二引数、第三引数にはバッファが渡るように独自メソッドを使うようなサンプルが示されています。

await axios
-  .post(url, formData, {
-    headers: {
-    // 'content-type': 'multipart/form-data',
-      ...formData.getHeaders(),
-    },
-  })
+  .post( url, formData.getBuffer(), formData.getHeaders() )

を試してみてはどうでしょうか。

Comments

[Reiz]

レスありがとうございます。
OSSの本質を理解していませんでした。
世界中のたくさんの人たちが使い、issueを上げては直されているのだから動かないのは自分が間違っているからだと思ってました。
公式ドキュメント、英語だからと言って苦手意識を持たず読もうと思います。