解决跨域问题
跨域问题说明，参考【JS】AJAX跨域-JSONP解决方案（一）
实例，使用上一章（【JS】AJAX跨域-JSONP解决方案（一））的实例
解决方案三（被调用方支持跨域）
被调用方解决，基于支持跨域的解决思路，基于Http协议关于跨域的相关规定，在响应头里增加指定的字段告诉浏览器，允许调用
跨域请求是直接从浏览器发送到被调用方，被调用方在响应头里增加相关信息，返回到页面，页面能正常获取请求内容。
1、服务端增加一个过滤器（CrossFilter.java），过滤所有请求，在请求响应中增加内容，如下：
1 package com.test.ajax.cross.filter; 2 3 import java.io.IOException; 4 5 import javax.servlet.Filter; 6 import javax.servlet.FilterChain; 7 import javax.servlet.FilterConfig; 8 import javax.servlet.ServletException; 9 import javax.servlet.ServletRequest; 10 import javax.servlet.ServletResponse; 11 import javax.servlet.http.HttpServletRequest; 12 import javax.servlet.http.HttpServletResponse; 13 14 import org.springframework.util.StringUtils; 15 16 /** 17 * 服务端解决跨域 18 * @author h__d 19 * 20 */ 21 public class CrossFilter implements Filter { 22 23 @Override 24 public void init(FilterConfig filterConfig) throws ServletException { 25 // TODO Auto-generated method stub 26 27 } 28 29 @Override 30 public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) 31 throws IOException, ServletException { 32 HttpServletResponse res = (HttpServletResponse) response; 33 34 HttpServletRequest req = (HttpServletRequest) request; 35 36 // 支持所有域 37 String origin = req.getHeader("Origin"); 38 if (!StringUtils.isEmpty(origin)) { 39 // 支持任何域名的跨域调用 且 支持带cookie（是被调用方域名的cookie，而不是调用方的cookie） 40 res.addHeader("Access-Control-Allow-Origin", origin); 41 } 42 // 指定允许的域，带cookie时，origin必须是全匹配，不能使用 * 43 // res.addHeader("Access-Control-Allow-Origin","http://localhost:8081"); 44 // 允许所有域，但不能满足带 cookie 的跨域请求 45 // res.addHeader("Access-Control-Allow-Origin","*"); 46 47 // 支持所有自定义头 48 String headers = req.getHeader("Access-Control-Allow-Headers"); 49 if (!StringUtils.isEmpty(headers)) { 50 // 允许所有header 51 res.addHeader("Access-Control-Allow-Headers", headers); 52 } 53 // 允许所有header 54 // res.addHeader("Access-Control-Allow-Headers","*"); 55 56 // 指定允许的方法 57 // res.addHeader("Access-Control-Allow-Methods","GET"); 58 // 允许所有方法 59 res.addHeader("Access-Control-Allow-Methods", "*"); 60 // 允许浏览器在一个小时内，缓存跨域访问信息（即上面三个信息） 61 res.addHeader("Access-Control-Max-Age", "3600"); 62 // 启用 cookie 63 res.addHeader("Access-Control-Allow-Credentials", "true"); 64 65 chain.doFilter(request, response); 66 67 } 68 69 @Override 70 public void destroy() { 71 // TODO Auto-generated method stub 72 73 } 74 75 }
2、在web.xml文件中注册过滤器
<filter> <filter-name>CrossFilter</filter-name> <filter-class>com.test.ajax.cross.filter.CrossFilter</filter-class> </filter> <filter-mapping> <filter-name>CrossFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
3、编辑测试界面，test3.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script src="jquery-1.11.3.min.js" type="text/javascript"></script> 7 </head> 8 <body> 9 <h2>测试服务端解决跨域问题</h2> 10 <a href="#" onclick="get()">发送get请求</a> 11 </body> 12 <script type="text/javascript"> 13 function get(){ 14 $.getJSON("http://localhost:8080/test-ajax-cross/test/get").then(function(result){ 15 console.log(result); 16 $("body").append("<br>" + JSON.stringify(result)); 17 }); 18 } 19 </script> 20 </html>
4、在浏览器中输入地址进行访问，http://a.com:8080/test-ajax-cross/static/test3.html
