axios.post发送小数据可以,但发送大数据出现Cross origin requests are only supported for protocol schemes: http, data,
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) => {});
至于后端怎么修改以接收前端发来的data数据,可以参考一下这篇文章【axios】get/post请求params/data传参总结
本人直接用Map接收了,凌晨了,终于解决了
本文来自博客园,作者:Coder-Jiang,转载请注明原文链接:https://www.cnblogs.com/coderjiang/p/18118070
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步