鍍金池/ 問答/HTML/ form提交默認(rèn)content-type是multipart/form-data

form提交默認(rèn)content-type是multipart/form-data

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>native-formdata2</title>
</head>
<body>
  <form name="test">
      <p>名稱: <input type="text" autocomplete="off" name="CustomerName" style="width: 300px" /></p>
      <p>電話: <input type="text" autocomplete="off" name="CustomerTel" style="width: 300px" /></p>
      <p><input id="btn" type="submit" value="提交" /></p>
  </form>
  <script>
    var form = document.querySelector('form');
    var btn = document.querySelector('input[type="submit"]');

    // 注意這里是對(duì)form綁定submit事件，而不是submit按鈕
    // 如果用click事件，則應(yīng)該是綁定在submit按鈕上的
    form.addEventListener('submit', function(e){
      
      var data = new FormData(form);
      var xhr = new XMLHttpRequest();
      xhr.open('post', 'http://10.10.10.10:3000');
      xhr.send(data);
      e.preventDefault();
    })
  </script>
</body>
</html>

上面是我自己寫的案例，簡(jiǎn)單說明一下'http://10.10.10.10:3000'服務(wù)器地址是我自己杜撰的，本來寫這個(gè)案例是想驗(yàn)證form的post請(qǐng)求默認(rèn)content-type是application/x-www-form-urlencoded，但是我運(yùn)行上面的代碼為什么默認(rèn)是multipart/form-data

下面是我輸入框都輸入12時(shí)發(fā)送請(qǐng)求的頭部信息

Request URL:http://10.10.10.10:3000/
Referrer Policy:no-referrer-when-downgrade

Request Headers

Provisional headers are shown
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryxzu3u4M23GW3UlGC
Origin:null
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36

Request Payload

------WebKitFormBoundaryxzu3u4M23GW3UlGC
Content-Disposition: form-data; name="CustomerName"

12
------WebKitFormBoundaryxzu3u4M23GW3UlGC
Content-Disposition: form-data; name="CustomerTel"

12
------WebKitFormBoundaryxzu3u4M23GW3UlGC--
回答
編輯回答
夏夕

這很正常，這是由于你提交的是FormData對(duì)象，不設(shè)置頭的話XMLHttpRequest 會(huì)調(diào)用FormData接口，默認(rèn)將你的請(qǐng)求頭設(shè)置為multipart/form-data，相當(dāng)于form表單提交設(shè)置form設(shè)置enctype="multipart/form-data",而表單默認(rèn)post 提交是enctype="application/x-www-form-urlencoded"，這兩個(gè)都是表單的MIME編碼

2017年8月23日 00:08