标签：过滤 source 后台管理系统 blank java href accept jquer delete
最近自己在写后台管理系统的时候，并没有采用jsp、freemaker、叶子等模板技术，而是由后端提供数据api，前端通过AJAX和JQuery来动态操作页面上的一些div、table元素，从而实现报表的动态加载。
因为本人并非专业前端，所以采用的技术比较古老，对于最近的前端框架，vue,angular,react等等,暂且按下不表。
说说遇到的几个坑：
1、AJAX发送请求的时候，默认是异步的，而不是同步的。
基于低耦合的编码，我在写ajax时，数据请求和数据处理是分开的，没加同步执行就导致了我的请求发送后，没有拿到回调的数据就已经开始执行数据处理了。
2、关于非同源链接发送异地址的请求，也就是CORS，跨域问题。
浏览器出于安全考虑，限制了JS发起跨站请求，使用XHR对象发起请求必须遵循同源策略（SOP：Same Origin Policy），跨站请求会被浏览器阻止，这对开发者来说是很痛苦的一件事，尤其是要开发前后端分离的应用时。
在现代化的Web开发中，不同网络环境下的资源数据共享越来越普遍，同源策略可以说是在一定程度上限制了Web API的发展。
关于跨域问题，只要用ajax来发送请求都会遇到。上个月一直在做一个小程序应用的后端服务接口，前端的朋友并没有和我放映有跨域问题，估计是小程序底层做了比较良好的封装，或者底层并不是使用简单的ajax请求，从而规避了这个问题。
前端如果解决的话，无非就是jsonp，加请求头，但是这样会增加前端同事的工作量。
我的解决方案是在后端解决：
（1）最简陋的方法，在后端web中添加一个filter，这个filter要的过滤顺序放在最前面，将对应的HTTP请求加上一个请求头。
1 /** 2 * 解决跨域问题 3 * Created by huxingyue on 2017/8/31. 4 */ 5 @WebFilter(filterName = "CORSFilter") 6 public class CORSFilter implements Filter { 7 public void destroy() { 8 } 9 10 public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException { 11 HttpServletResponse response = (HttpServletResponse) resp; 12 response.setHeader("Access-Control-Allow-Origin", "*"); 13 response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); 14 response.setHeader("Access-Control-Max-Age", "3600"); 15 response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 16 chain.doFilter(req, resp); 17 } 18 19 public void init(FilterConfig config) throws ServletException { 20 21 } 22 23 }
（2）使用@CrossOrigin注解
1 @RestController 2 @RequestMapping("/account") 3 public class AccountController { 4 5 @CrossOrigin 6 @GetMapping("/{id}") 7 public Account retrieve(@PathVariable Long id) { 8 // ... 9 } 10 11 @DeleteMapping("/{id}") 12 public void remove(@PathVariable Long id) { 13 // ... 14 } 15 }
这是一个很简单的示例，官方参考文档还有更加全面的示例。
1 <mvc:cors> 2 3 <mvc:mapping path="/api/**" 4 allowed-origins="http://domain1.com, http://domain2.com" 5 allowed-methods="GET, PUT" 6 allowed-headers="header1, header2, header3" 7 exposed-headers="header1, header2" allow-credentials="false" 8 max-age="123" /> 9 10 <mvc:mapping path="/resources/**" 11 allowed-origins="http://domain1.com" /> 12 13 </mvc:cors>
参考文档：http://spring.io/blog/2015/06/08/cors-support-in-spring-framework
（3）使用第三方CORSFilter
官网：http://software.dzhuvinov.com/cors-filter.html
3、AJAX发送post请求，数据为json时，data对应的内容应该是json字符串，而不是json字符串
参考资料：
http://start.spring.io/
http://www.jianshu.com/p/d05303d34222
标签：过滤 source 后台管理系统 blank java href accept jquer delete
原文地址：http://www.cnblogs.com/starmoon1994/p/7472548.html
