如何进⾏前后端联调测试_如何提⾼效率？前后端分离、权限
控制
前端从后端剥离，形成⼀个前端⼯程，前端只利⽤Json来和后端进⾏交互，后端不返回页⾯，只返回Json数据。前后端之间完全通过public API约定。
后端 Springboot：Controller层返回Json数据。
前端 Vue + ElementUI + Vue router + Vuex + axios + webpack
主要参考：
1.Vue官⽹
2.⼀个基于Vue+ElementUI实现的前端⼯程教程，很赞，前端⼯程照着这个例⼦搭建起来后，可以参考它的升级版
这⾥主要说⼀下开发⼯程中遇到的问题：
1.跨域
由于开发中前端⼯程使⽤webpack启了⼀个服务，所以前后端并不在⼀个端⼝下，必然涉及到跨域：
XMLHttpRequest会遵守同源策略(same-origin policy). 也即脚本只能访问相同协议/相同主机名/相同端⼝的资源, 如果要突破这个限制，那就是所谓的跨域, 此时需要遵守CORS(Cross-Origin Resource Sharing)机制。
解决跨域分两种：
1.server端是⾃⼰开发的，这样可以在在后端增加⼀个
主要就是在Response Header中增加 "Access-Control-Allow-Origin: *"
由于我们在前后端分离中集成了shiro，因此需要在headers中⾃定义⼀个'Authorization'字段，此时普通的GET、POST等请求会变成preflighted request，即在GET、POST请求之前会预先发⼀个OPTIONS请求，这个后⾯再说。推荐⼀篇博客介绍 preflighted request。
2.server端不是⾃⼰开发的，可以在前端加proxyTable，参考这个，不过这个只能在开发的时候⽤，后续部署，可以把前端项⽬作为静态资源放到后端，这样就不存在跨域(由于项⽬需要，我现在是这么做的，根据⽹上博客介绍，可以使⽤nginx，具体怎么做可以在⽹上搜⼀下)。
遇到了⽹上很多⼈说的，proxyTable⽆论如何修改，都没效果的现象。
1.(⾮常重要)确保proxyTable配置的地址能访问，因为如果不能访问，在浏览器F12调试的时候看到的依然会是提⽰404。
并且注意，在F12看到的js提⽰错误的域名，是js写的那个域名，并不是代理后的域名。(l楼主就遇到这
个问题，后端地址缺少了查询参数，代理设置为后端地址，然⽽F12看到的错误依然还是本地的域名，并不是代理后的域名)
2.就是要⼿动再执⾏⼀次npm run dev
前后端分离项⽬中集成shiro
这⾥说⼀下实际开发集成过程中遇到的问题：
1.OPTIONS请求不带'Authorization'请求头字段：
前后端分离项⽬中，由于跨域，会导致复杂请求，即会发送preflighted request，这样会导致在GET／POST等请求之前会先发⼀个OPTIONS请求，但OPTIONS请求并不带shiro的'Authorization'字段(shiro的Session)，即OPTIONS请求不能通过shiro验证，会返回未认证的信息。
解决⽅法：给shiro增加⼀个过滤器，过滤OPTIONS请求
前端测试和后端测试的区别2.设置session失效时间
shiro session默认失效时间是30min，我们在⾃定义的sessionManager的构造函数中设置失效时间为其他值
部署项⽬
前端项⽬部署主要分两种⽅法：
1.将前端项⽬打包(npm run build)成静态资源⽂件，放⼊后端，⼀起打包。后端写⼀个Controller返回前端界⾯(我使⽤Vue开发的是单页⾯应⽤)，但是这样其实⼜将前后端耦合在⼀起了，不过起码做到前后端分离开发，⽅便开发的⽬的已经达成，也初步达成了要求，由于项⽬的需要，我是这样做的，并且免去了跨域问题。
2.将前端⼯程另启⼀个服务(tomcat，nginx，nodejs)，这样有跨域的问题。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。