最近在快速开发一个后台系统,前端使用了bootstrap和angular搭建,后端使用Java,由于前端采用的是单页富应用的Web App的构建方式,所以不适合做JSP页面,最后采用了【前端+ajax+后台】的前后端独立开发模式。
但这种开发模式,最大的问题是,ajax调用的跨域问题。跨域将带来很多问题,一方面服务器和浏览器不允许跨域调用,另一方面就算服务器端设置了可跨域调用,每一次跨域的ajax调用都会产生一个新的SESSIONID,无法保存会话状态。
所以,前端后独立开发最关键问题是解决跨域ajax调用后台接口的问题。这里主要分为两类处理方式:
一类:坚持跨域调用,采取跨域解决方法。详情可参考JavaScript多种跨域方式
一类:把跨域改为同域,这时调用接口将没有任何压力
本文介绍的是采取第二种方式——把跨域改为同域!
##具体操作步骤
前后端独立开发,分别对应两台电脑,连接着相同的局域网。
在后端建立一个共享文件夹,然后在JSP工程里设置该目录对应一个开发的URL,比如:http://10.0.0.116:8040/jobnow-managementsite/。
然后前端把前端文件放到该目录下,打开浏览器,访问 http://10.0.0.116:8040/jobnow-managementsite/index.html 即可进行开发!
这时调用的ajax的URL也是http://10.0.0.116:8040/的域名,故没有跨域的烦恼了!
##前端开发需要注意点
这种方式把代码都放到了后台开发人员的电脑中了,前端开发者需要注意:
- 不要手动上传代码到共享文件夹。一来这样非常低效,二来容易出错。建议利用fis3等前端构建工具编译并发布代码传到共享文件夹
- 在开始联调接口之前,前端最好把静态页面都重构完成了
- 因为要后台开发人员开着服务器让前端来调试,所以能调试接口时就不要纠结纯前端的问题
最后,除了用共享文件夹的方法,还可以用远程服务器等方式,总之把调试地址和调用接口处于同域来进行开发。
来源:oschina
链接:https://my.oschina.net/u/1414034/blog/532126