fetch使用FormData表单提交踩坑记录

项目场景：

提示：这里简述项目相关背景：

在react框架中，使用fetch进行表单提交（不是文件），之前都是json传参数。

---

问题

代码如下

export const fetchMethod = ({ method, params }) => {
  let headers = {
     'Content-Type': 'application/json; charset=UTF-8',
	 'X-Requested-With': 'XMLHttpRequest',
	 'token': '123123',
  };

  const checkStatus = (response) => {
    if (response.ok) {
      return response.json();
    }
    const error1 = new Error(response.status);
    error1.response = response;
    throw error1;
  };

  return fetch(`地址`, {
    headers,
    method: 'POST',
    body: JSON.stringify(params),
    credentials: 'include',
  }).then(checkStatus).then((result) => {
	return result;
  }).catch(err => Promise.reject(err));

报错如下：传参根本不是表单格式

---

尝试和报错：

1. 认真查看了代码，表单传参应该不能使用JSON.stringify(params)，则进行修改。
   
   但是，报错如下
   
   传参还是不对，继续看！！！

2. 看到了header里面的'Content-Type': 'application/json; charset=UTF-8'，有问题。

   修改为'Content-Type': 'multipart/form-data'之后有报错了。。。
   
   后来看multipart/form-data是传文件的时候用的

3. 继续改Content-Type': 'application/x-www-form-urlencoded'
   报错如下：
   
   格式有formData，but 还是不对诶

然后就各种搜

---

解决方案：

fetch提交自定义表单时，不要设置Content-Type的值，最后去掉就好了。

终于好了

解决之后感觉还挺简单的，但是找原因也是花了好久，之前没用过fetch，然后对Content-Type也不是很熟悉，做个总结吧！

---

总结

1. headers 中常用的 Content-Type

   Content-Type的格式：type/subtype ;parameter
   （1）type：主类型，任意的字符串，如text，如果是 * 号代表所有；
   （2）subtype ：子类型，任意的字符串，如html，如果是*号代表所有，用“/”与主类型隔开；
   （3）parameter：可选参数，如charset，boundary等。

   取值	场景
   application/json	参数本身就是json格式的数据，服务端/客户端会按json格式解析数据
   application/xml 和 text/xml	与application/json类似，这里用的是xml格式的数据
   multipart/form-data	首先生成了一个 boundary 用于分割不同的字段，最后以------boundary–为结束标识。multipart/form-data支持文件上传的格式，一般需要上传文件的表单则用该类型。
   application/x-www-form-urlencoded	如果是中文或特殊字符会自动进行URL转码。不支持文件，一般用于表单提交