前端请求failed to load response解决方案

情况是这样的，vue写的一个前端页面，写了一个上传图片的功能，在生产环境上是可以使用的，但在测试环境上不可用，所以开始找原因。

第一步

打开浏览器，查看网页代码，走到network页面开始抓包。

可以看到这个请求的status是failed，点击这个包，它的response页面显示 failed to load response。

第二步

在js页面添加代码

error: function(xhr, exception){
                alert(xhr.status);
                alert(exception);
                }

刷新页面。
再次执行操作
弹窗显示xhr的状态码为0
exception的类型是error

第三步

xhr的状态码为0即请求的send方法就执行失败。
我们的前端代码中
这个request的请求方式是用的Ajax发送的
而Ajax有一个特性，就是不支持跨域通信。
我们部署的前端是在本地127.0.0.1的8080端口
后台的地址是在阿里云服务器的8869端口
所以前后端的ip不对

第四步

将前端部署在阿里云服务器上，访问端口设置为8080
结果还是跟原来一样，这是为什么呢
原来ajax的跨域通信不止是针对ip地址，连端口都要一样，所以就有两个解决方法
第一个是使用nginx将两者都代理到80端口，这样两者就不存在跨域通信的问题了
还有一个就是，直接将两个端都部署在同一个tomcat下，同样能解决跨域通信的问题。