浏览器 环境 和我 methods retrieve name 后台 一件事
最近自己在写后台管理系统的时候,并没有采用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请求加上一个请求头。
- /**
- * 解决跨域问题
- * Created by huxingyue on 2017/8/31.
- */
- @WebFilter(filterName = "CORSFilter") public class CORSFilter implements Filter {
- public void destroy() {}
- public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException,
- IOException {
- HttpServletResponse response = (HttpServletResponse) resp;
- response.setHeader("Access-Control-Allow-Origin", "*");
- response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
- response.setHeader("Access-Control-Max-Age", "3600");
- response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
- chain.doFilter(req, resp);
- }
- public void init(FilterConfig config) throws ServletException {
- }
- }
(2)使用
- @CrossOrigin注解
- @RestController
- @RequestMapping("/account")
- public class AccountController {
- @CrossOrigin
- @GetMapping("/{id}")
- public Account retrieve(@PathVariable Long id) {
- // ...
- }
- @DeleteMapping("/{id}")
- public void remove(@PathVariable Long id) {
- // ...
- }
- }
这是一个很简单的示例,官方参考文档还有更加全面的示例。
- <mvc:cors>
- <mvc:mapping path="/api/**"
- allowed-origins="http://domain1.com, http://domain2.com"
- allowed-methods="GET, PUT"
- allowed-headers="header1, header2, header3"
- exposed-headers="header1, header2" allow-credentials="false"
- max-age="123" />
- <mvc:mapping path="/resources/**"
- allowed-origins="http://domain1.com" />
- </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
前端-关于CORS跨域的解决方案,面向服务端
来源: http://www.bubuko.com/infodetail-2291217.html