axios.post发送小数据可以，但发送大数据出现Cross origin requests are only supported for protocol schemes: http, data,

本作品采用「署名 - 非商业性使用 - 禁止演绎 4.0 国际版」许可协议进行许可。

本文链接：https://blog.youkuaiyun.com/qq_29997037/article/details/118562651

本文介绍了在使用 Axios 进行Base64格式的大文件上传时遇到的问题，即由于文件过大导致的跨源请求错误。通过分析错误信息，了解到 params 仅适用于GET请求，而大文件上传应使用 data 添加到请求体中。修复后的代码示例展示了如何正确地以 data 形式传递Base64数据，从而成功上传。同时，文章提到了后端接收前端data数据的方法，并分享了相关参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

imgBase64Data是图片的Base64格式数据，当imgBase64Data比较小的时候（大概是几十KB），是可以上传成功的，但是到了几MB，一直报错：

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

下面是错误代码

this.axios({
  method: 'post',
  url: 'http://127.0.0.1:8888/uploadImage',
  params: {
    imgBase64Data: imgBase64Data
  },
})
  .then((response) => {
      Toast('上传成功！')
    }
  })
  .catch((response) => {
    Toast.fail("上传失败！");
  })
  .then((response) => {});

疑惑了很久，查了半天看到这个讨论vue axios post请求发送图片base64编码给后台报错HTTP 错误 414
才明白原来必须要用data传入数据给后端，而不是params，要不然就上传不成功
因为params是添加到url的请求字符串中的，用于get请求。
而data是添加到请求体（body）中的，用于post请求。（~~说到底还是基础不扎实~~ ）

所以修改一下上面的代码，只需要把params改成data就行

this.axios({
  method: 'post',
  url: 'http://127.0.0.1:8888/uploadImage',
  data: {
    imgBase64Data: imgBase64Data
  },
})
  .then((response) => {
      Toast('上传成功！')
    }
  })
  .catch((response) => {
    Toast.fail("上传失败！");
  })
  .then((response) => {});