跨域

1.1 什么是跨域

  • 浏览器开启了安全模式
  • 发送的请求必须是xhr(ajax)请求
  • 要求请求发送方和请求接收方域不同(协议,IP,端口)

2.2 解决跨域的方案

  • 让浏览器关闭安全模式:chrome.exe --disable-web-security --user-data-dir=D:\abaaba
  • 伪装Ajax请求变为script请求:
  • 再很久很久之前,一帮野生程序员为了解决跨域问题,采用了JSONP的方式,JSONP的方式就是将xhr请求类型悄悄滴替换为了Script请求,从而处理了跨域得问题,约定需要将响应的JSON数据存放到callback参数的函数参数中

/list?callback=jQuertk4j35h34kjhj5gjh5g345h34kj5h34jk5 jQuertk4j35h34kjhj5gjh5g345h34kj5h34jk5(JSON)

  • 采用浏览器支持的同源策略,让浏览器认为请求获得数据是安全的,需要设置大量的响应头信息
  • 再Controller类上添加注解:@CrossOrigin(allowCredentials = “true”)
  • 构建过滤器(网关):
@Override
 public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
     HttpServletResponse response = (HttpServletResponse) servletResponse;
     String origin = request.getParameter("origin");
     if(origin != null){
     	response.setHeader("Access-Control-Allow-Origin", origin);
      }
     response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
     response.setHeader("Access-Control-Max-Age", "3600");
     response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
     response.setHeader("Access-Control-Allow-Credentials", "true");
     filterChain.doFilter(servletRequest, servletResponse);
 }

  • 可以后期采用Nginx帮我们解决跨域问题,Nginx可以同时代理静态HTML页面和Tomcat后台程序,统统第通过Nginx请求,就不存在跨域问题了。