场景描述:
在进行修改操作时,因为表单里有富文本组件,用户在富文本里编辑的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
答案在这里: