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

场景描述：

      在进行修改操作时，因为表单里有富文本组件，用户在富文本里编辑的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.

报错信息如下：

 

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

 

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

 

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

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

 

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

 

答案在这里：

 

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