Fetch与Axios请求对比：为何我的Fetch请求报错？

一、两个请求是否一致？ #

这两个请求不一致，核心差异在于请求体的处理逻辑以及请求头的自动设置上。

二、Fetch请求报错的根本原因 #

Fetch API不会自动处理请求体的序列化：

• 当你直接把普通对象传给body参数时，Fetch会将其转换为[object Object]这个无意义的字符串，后端无法解析该格式的请求体，因此会报错。
• 同时，Fetch不会自动添加Content-Type: application/json请求头，后端无法识别请求体的格式，也会导致解析失败。

而Axios默认会完成以下操作：

• 自动将传入的请求体对象序列化为JSON字符串
• 自动添加Content-Type: application/json请求头
  这也是你的Axios请求能正常工作的原因。

三、修正后的Fetch请求代码 #

需要手动序列化请求体并添加对应的请求头：

let response = await fetch('https://online.yoco.com/v1/charges/', {
    method: 'POST',
    headers: {
      'X-Auth-Secret-Key': process.env.SECRET_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        token: paymentToken,
        amountInCents: 2799,
        currency: 'ZAR' 
    })
});
let responseData = await response.json()

额外注意：Fetch的错误逻辑和Axios不同——Fetch仅在网络层面失败时抛出异常，HTTP错误状态码（如400、500）不会触发catch，需要手动通过response.ok判断请求是否成功；而Axios会将HTTP错误状态码直接视为异常，进入catch块处理。

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