GET/HEAD请求含请求体致fetch执行失败的TypeError问题

你碰到的这个错误完全是因为HTTP的基础规范——GET和HEAD请求是不允许携带请求体的，浏览器的fetch API严格遵守了这个规则，所以当你给GET请求加body参数时，就直接抛出了TypeError。

先看看你的问题代码：

export const checkMobile = mobile => { 
  return ajax(`/mobiles/search`, { method: "GET", body: mobile }); 
}; 

function ajax(uri, options = {}) { 
  const defaultOptions = getDefaultOptions(); 
  options.method = options.method ? options.method : defaultOptions.method; 
  if (!options.formType) { 
    options.headers = options.headers ? options.headers : defaultOptions...
  }
}

这里的核心问题就是method: "GET"和body: mobile同时存在的矛盾。

给你两个可行的解决方案，根据后端接口的支持情况选：

方案一：改用POST请求（如果后端允许） #

如果后端接口可以接受POST方法来处理这个查询，直接把请求方法改成POST就行，记得如果需要传JSON格式的参数，还要做好序列化并设置对应的请求头：

export const checkMobile = mobile => { 
  return ajax(`/mobiles/search`, { 
    method: "POST", 
    body: JSON.stringify({ mobile }), // 序列化参数
    headers: { 'Content-Type': 'application/json' } // 告诉后端参数格式
  }); 
};

方案二：把参数放到URL查询字符串里（适配GET请求） #

如果后端只支持GET请求，那就把mobile参数拼到URL的查询参数中，这是GET请求传递参数的标准方式：

方式1：手动拼接（注意编码） #

export const checkMobile = mobile => { 
  // 用encodeURIComponent处理特殊字符，避免URL解析错误
  return ajax(`/mobiles/search?mobile=${encodeURIComponent(mobile)}`, { method: "GET" }); 
};

方式2：用URLSearchParams（更规范） #

export const checkMobile = mobile => { 
  const params = new URLSearchParams();
  params.append('mobile', mobile);
  return ajax(`/mobiles/search?${params.toString()}`, { method: "GET" }); 
};

这样就完全不需要传body参数了，符合GET请求的规范，错误自然就消失了。

另外也可以检查下你的ajax函数里的defaultOptions，看看默认请求方法是不是GET，避免后续不小心再犯同样的错误~

内容的提问来源于stack exchange，提问作者Sourabh Banka