原因
在前后端分离的情况下,就需要后端开发环境和前端开发环境分离,在开发阶段,后端项目和前端项目并未合并,都在独立的开发环境下进行独立开发,则前端需要对接口发起请求,而接口独立部署在测试服务器上(统一的主版本),有独立的域名,前端项目也有他自己的域名,所以当页面向接口发起请求就会遇到跨域的问题。
例子
vue启动之后他会跟tomcat一样占用本地的8080端口,假如测试接口部署在测试服务器上,域名为192.168.31.99:8080,那么他们是2个不一样的域名(127.0.0.1:8080和192.168.31.99:8080),当发起请求时,是可以正常发起的,接口也可以正常被接受到,然后当他处理完之后,需要进行回调响应,则域名不一样了,此时请求是192.168.31.99:8080需要响应回127.0.0.1:8080,是被拒绝的,会报跨域的错误。然而这个不是项目的原因,合并就不存在这个错误了。
解决方案
1 jsonp
通过jsonp的形式发起请求,不过接口也要跟着变动,处理jsonp
2 浏览器代理插件
解决这个问题的核心思路就是代理请求,把发出的接口请求进行代理一遍来转换你的域名就可以了。
可以使用谷歌浏览器的插件Proxy SwitchyOmega,需要开下小飞机去下谷歌浏览器商店下载下。
然后进行相关配置
1配置下要代理到的那台接口服务器的地址和端口号
然后在配置一个动态的规则的
选择网址正则,然后从上往下排,依次过滤掉本地的前端静态资源,然后剩下最好一个是要代理过去的接口请求,这里这么写是因为这个是跑在tomcat上的项目,需要过滤静态资源,然后单独将请求过滤出来代理到测试服务器上。
然后在页面上开启这个自动模式
3项目配置代理
例如:vue项目的话,可以配置下代理
下载组件:npm install --save-dev http-proxy-middleware
然后在config文件夹中的index.js增加一段代理到哪里的配置
找到该地方,有个属性proxyTable里面配置对应的属性
这段配置的意思是:
所有的请求的url都会进行匹配,这里配置了2个,分别是bpi和api,他会获取请求路径,然后进行匹配,如果有/bpi开头就进入bpi的代理配置,将请求代理到target的域名里去,pathRewrite是url路径进行正则匹配然后重写请求路径,这里bpi里面的正则意思是将url开头的/bpi这部分重写成/api/tag/all
4nginx 代理
通过nginx来进行请求代理
启动后会通过nginx 来分发请求