Vue axios发送post请求参数太多,接口报错:No ‘Access-Control-Allow-Origin‘ header is present on the requested resou

时间:2024-04-09 18:04:48

场景描述:

      在进行修改操作时,因为表单里有富文本组件,用户在富文本里编辑的html可能会很长,富文本里的html作为参数传给接口执行updata操作时报错。

Access to XMLHttpRequest at 'http://192.168.*.**:8888/base/infoNews/update? ... ...' from origin 'http://192.168.3.7:8805' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

报错信息如下:

Vue axios发送post请求参数太多,接口报错:No ‘Access-Control-Allow-Origin‘ header is present on the requested resou

 Vue axios发送post请求参数太多,接口报错:No ‘Access-Control-Allow-Origin‘ header is present on the requested resou

 后端开发人员打断点调试显示接口并未成功调用,前端点击了“修改”按钮后并未进入后端的断点。这个时候猜测是在前端的请求拦截器拦截了,在请求拦截器的时候就报错了。

 

网上搜索报错关键字 “No 'Access-Control-Allow-Origin' header is present on the requested resource.” 都说是跨域问题,可是我的富文本html字符串短的时候接口就不会报错,只有富文本html字符串长的时候接口才会报错,所以这个时候一定不是跨域问题。在谷歌调试器里查看接口请求信息,看到请求的接口后面拼接了好长一段参数。

Vue axios发送post请求参数太多,接口报错:No ‘Access-Control-Allow-Origin‘ header is present on the requested resou

 

正常post请求url后面是不会拼接参数的,肯定是因为url后面拼接了太多参数,导致接口url改变了,所以引发的跨域问题

好了,找到了原因,那就针对解决post请求时url后面拼接参数的问题。

 

在网上找到一个帖子:https://forum.vuejs.org/t/post-url/45633

Vue axios发送post请求参数太多,接口报错:No ‘Access-Control-Allow-Origin‘ header is present on the requested resou

 

答案在这里:

 Vue axios发送post请求参数太多,接口报错:No ‘Access-Control-Allow-Origin‘ header is present on the requested resou

我目前项目里post和get请求时,参数都是用的params,所以无论是发送的post还是get请求,url后面都拼接了参数。参数少的时候还好,没有问题;一旦参数多了,就像刚刚传富文本html那样,就会报错。所以解决方法是:post请求的时候用data传递参数。

Vue axios发送post请求参数太多,接口报错:No ‘Access-Control-Allow-Origin‘ header is present on the requested resou

Vue axios发送post请求参数太多,接口报错:No ‘Access-Control-Allow-Origin‘ header is present on the requested resou