web-dev-qa-db-ja.com

フェッチ-multipart / form-dataに境界がありませんPOST

立ち寄ってくれてありがとう。

fetch api を使用して、bodyリクエストのPOSTとしてnew FormData()を送信したい

操作は次のようになります

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. これが不可能な場合、なぜですか？

みんなありがとう！このコミュニティは、多かれ少なかれ私が専門的な成功を収めている理由です。

javascriptxmlhttprequestfetchform-datafetch-api
36
James

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

76
James
fetch(url,options)
  1. 文字列をoptions.bodyとして設定する場合、リクエストヘッダーでContent-Typeを設定する必要があります。そうしないと、デフォルトでtext/plainになります。

  2. Options.bodyがlet a = new FormData()やlet b = new URLSearchParams()のような特定のオブジェクトである場合、Content-Typeを手動で設定する必要はありません。自動的に追加されます。

    • aの場合、次のようになります

    multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

    ご覧のとおり、境界は自動的に追加されます。

    • bの場合、application/x-www-form-urlencoded;です
8
moonreader

「Content-Type」を削除し、「Accept」をhttpヘッダーに追加しましたが、うまくいきました。使用したヘッダーは次のとおりです。

'headers': new HttpHeaders({
        // 'Content-Type': undefined,
        'Accept': '*/*',
        'Authorization': 
        "Bearer "+(JSON.parse(sessionStorage.getItem('token')).token),
        'Access-Control-Allow-Origin': this.apiURL,
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
        'Access-Control-Allow-Headers': 'Origin,X-Requested-With,content-type,accept',
        'Access-Control-Allow-Credentials': 'true' 

      })
5
ravichandra vydhya

aurelia-api （aurelia-fetch-clientのラッパー）を使用しています。この場合、Content-Typeのデフォルトは「application/json」です。だから私はContent-Typeをundefinedに設定し、それは魅力のように働いた。

3
Diego Troitiño

私は同じ問題を抱えていましたが、Content-Typeプロパティを除外することで修正でき、ブラウザが境界とコンテンツタイプを自動的に検出および設定できるようになりました。

コードは次のようになります。

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

fetch('https://api.myapp.com',
  {
    method: 'POST',
    body: formData
  }
)
3
Andrew Faulkner

Add headers:{content-type: undefined}ブラウザは、「複数/フォームデータ」を追加する場合、ストリーミングでファイルを部分的にアップロードするための境界を生成します。つまり、ストリーミングを作成し、ファイルをアップロードして、 -部

したがって、request.headers = {content-type：undefined}を追加してもかまいません

1
Nver Abgaryan