Fetch API与Axios API的GET请求差异及CORS预检问题咨询

问题现象 #

• 使用Fetch API发送带body的GET请求时，浏览器直接抛出错误：Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body
• 使用Axios发送带data的GET请求时，浏览器不报错，但服务器无法获取请求体，且触发了GET请求通常不会触发的CORS预检请求
• 将接口改为POST请求时，无论用Fetch还是Axios，若不添加body/data字段，都不会触发预检请求，这与“非GET/OPTIONS请求会触发预检”的认知不符

Axios的请求情况 #

无data字段的GET请求

const response = (
  await axios.request<AuthType>({
    url: "http://192.168.1.34:4488/webadmin/generatenewaccesstoken",
    method: "GET",
    withCredentials: true,
  })
).data;

此时浏览器不会发送预检请求，请求正常执行。

含data字段的GET请求

添加空对象的data字段后：

const response = (
  await axios.request<AuthType>({
    url: "http://192.168.1.34:4488/webadmin/generatenewaccesstoken",
    method: "GET",
    withCredentials: true,
    data:{}
  })
).data;

浏览器会发送CORS预检请求，且服务器无法获取到data中的内容。

Fetch的请求情况 #

无body字段的GET请求

let response = await (
  await fetch("http://192.168.1.34:4488/webadmin/generatenewaccesstoken", {
    method: "GET",
    credentials: "include",
  })
).json();

请求正常发送，无报错和预检。

含body字段的GET请求

let response = await (
  await fetch("http://192.168.1.34:4488/webadmin/generatenewaccesstoken", {
    method: "GET",
    credentials: "include",
    body: JSON.stringify({}),
  })
).json();

浏览器直接拦截请求，不会发送任何请求到服务器，同时抛出上述类型错误。

推断验证与原因解释 #

你的推断完全正确，Axios的data并非只是Fetchbody的简单抽象，二者存在本质差异，具体原因如下：

1. Fetch严格遵循HTTP规范
   HTTP标准明确规定GET/HEAD方法不允许携带请求体，Fetch API直接对接浏览器的底层请求能力，会严格执行这一规范，因此当GET请求带body时，浏览器直接拦截并抛出错误，请求根本不会发出。

2. Axios对data的特殊处理
   Axios在处理GET请求的data参数时，并不会将其作为请求体发送（因为它也遵循HTTP规范，不会给GET请求加body），但会触发两个关键行为：

   • 由于data是对象，Axios自动给请求添加Content-Type: application/json请求头
   • 这个自定义请求头不属于CORS简单请求允许的头部范围，因此浏览器判定该请求为非简单请求，触发CORS预检（OPTIONS请求）
   • 实际发送的GET请求中并没有请求体，所以服务器无法获取data的内容

3. POST请求不触发预检的原因
   “非GET/OPTIONS请求会触发预检”是错误认知，CORS预检的触发条件是请求是否属于简单请求：

   • 简单请求需满足：方法为GET/HEAD/POST，且请求头仅包含Accept、Accept-Language、Content-Language、Content-Type（值限定为application/x-www-form-urlencoded、multipart/form-data、text/plain）
   • 当POST请求不带body/data时，Axios和Fetch都不会添加额外自定义请求头，Content-Type也不会被设置为非简单值，因此属于简单请求，不会触发预检

内容的提问来源于stack exchange，提问作者John George