前端-前后端分离下跨域问题

原因

    在前后端分离的情况下，就需要后端开发环境和前端开发环境分离，在开发阶段，后端项目和前端项目并未合并，都在独立的开发环境下进行独立开发，则前端需要对接口发起请求，而接口独立部署在测试服务器上（统一的主版本)，有独立的域名，前端项目也有他自己的域名，所以当页面向接口发起请求就会遇到跨域的问题。

例子

    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 来分发请求

 

 

转载于:https://my.oschina.net/xiaohuihui96/blog/2120761