1. ホーム
  2. javascript

fetch - multipart/form-data POST に境界がない

2023-08-17 03:42:29

質問

お立ち寄りいただきありがとうございます。

を送信したいのですが。 new FormData() として bodyPOST を使ったリクエストの フェッチアピー

を実行すると、次のようになります。

var formData = new FormData()
formData.append('myfile', file, 'someFileName.csv')

fetch('https://api.myapp.com', 
  {
    method: 'POST',
    headers: {
      "Content-Type": "multipart/form-data"
    },
    body: formData
  }
)

ここで問題なのは、境界線、例えば

boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu

には決して入りません。 Content-Type: ヘッダには入りません。

は次のようになります。

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu

で同じ操作をしようとすると、と表示されます。 new XMLHttpRequest() というように

var request = new XMLHttpRequest()
request.open("POST", "https://api.mything.com")
request.withCredentials = true
request.send(formData)

ヘッダが正しく設定されている

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu

ということで、質問です。

  1. を作るにはどうしたらいいでしょうか? fetch と全く同じように動作させるには XMLHttpRequest のような振る舞いをするのでしょうか?

  2. が不可能な場合、その理由は?

みなさん、ありがとうございます。このコミュニティは、多かれ少なかれ、私がプロとして成功した理由です。

どのように解決するのですか?

この問題を解決するには、明示的に Content-Typeundefined に変更することで、ブラウザや使用しているクライアントがそれを設定し、境界値をそこに追加することができます。残念なことですが、本当です。