请求跨域问题详解

什么是跨域

• 跨越是浏览器进行安全限制的一种方法，如果浏览器禁用了这种安全限制就不会出现跨域问题

产生跨域的原因（以下三者都满足）

• 只要调用方访问被调用方的域名、端口、IP不一样
• 浏览器没有禁用安全限制
• 采用了XMLHttpRequest的请求

解决跨域的思路

• 被调用方解决： 被调用方解决-支持跨域（根据http协议关于跨域方面的要求，增加响应头信息，告诉浏览器允许被跨域调用）（因为在发生跨域请求时首先调用方发送一个预检请求（OPTIONS请求），这个请求就会被带上允许跨越的请求头信息）
• 调用方解决：使用代理做调用解决跨域问题-隐藏跨域（利用nginx的反向代理，使访问同一个域名不同的资源路径会代理到不同的服务器上，每个跨域的请求都会带上origin请求头字段，因为访问的资源都是同域名下的，所以不会产生跨越问题）
• 一切解决思路都是围绕跨越产生原因而来

解决跨域的方法

1. 被调方过滤器解决方法
   1. 在过滤器中给预检请求响应对象中增加对应头部信息告诉请求方这个请求允许跨域 :
      1. res.addHeader("Access-Control-Allow-Origin", *)(允许跨域的请求源地址)；
      2. res.addHeader("Access-Control-Allow-Methods", "GET","PUST","HEAD")(允许跨域的请求类型)；
      3. res.addHeader("Access-Control-Allow-Headers", "Content-Type","user-defined-headers")(如果调用方有自定义的头部信息，需要填写上)；
      4. res.addHeader("Access-Control-Max-Age", "3600")(预检缓存的秒数);
   2. 如果请求中有带cookies的跨域请求：
      1. res.addHeader("Access-Control-Allow-Credentials", "true");
      2. res.addHeader("Access-Control-Allow-Origin","http://localhost:80");//带Cookie时Access-Control-Allow-Origin需要全匹配，不能用通配符
      3. 我们可以通过以下方式设置请求源地址

           String origin = req.getHeader("Origin");
              if(!StringUtils.isEmpty(origin)) {
   		      res.addHeader("Access-Control-Allow-Origin", origin);
       	   }
   

   1. 带自定义头的跨域

      //支持所有自定义头

       String headers = req.getHeader("Access-Control-Request-Headers");
           if(!StringUtils.isEmpty(headers)) {
               res.addHeader("Access-Control-Allow-Headers",headers);
           }
   

2. Spring注解解决跨域问题

@Controller
@RequestMapping("/test")
@CrossOrigin(origins= {"*"},methods= {RequestMethod.PUT,RequestMethod.GET})
public class TestCrossServer {
	
	@ResponseBody
	@RequestMapping("/get1")
	public void getCross(HttpServletRequest request,HttpServletResponse response) {
		System.out.println("/get1");
		try {
			response.getWriter().println("data=get1");
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}

在被访问的控制器中加上这行代码：@CrossOrigin(origins= {"*"},methods={RequestMethod.PUT,RequestMethod.GET})，这个里面还可以设置更多的跨域属性，有兴趣自行查询下源码

1. 可以自行控制放送请求的类型来解决跨域，比如将xhr请求换成jsonp请求，这里jsonp不多做介绍，有兴趣自行百度下。

2. 调用方可以利用nginx反向代理到跨域的服务主机上来防止跨域问题

   • 比如A网站地址是：http://localhost:8080;B网站是httP://localhost:8081, 因为端口不一样，当A网站访问B网站时就会发生跨域问题。这时我们可以把所有的请求放到nginx服务器上，让它做请求转发，nginx配置如下：

    // 定义一个server块
    server｛
        listen 80; // 监听80端口
        server_name com.ajax; 定义一个虚拟域名，这个域名会去匹配请求头中的Host头部；
        
        // location 
        location /(这部分是访问的资源路径，/表示全部路径，也可以使用正则表达式) { 
            proxy_pass http:localhost:8080/; 表示所有的有的资源都转发到该服务器上
        }
        
        location /ajax {
                proxy_pass http://localhost:8081/; //只要是/ajax开头的转发到该服务器
        }
        如果后面有匹配的就会覆盖前面的配置。
       
        只有我们把A网站访问B网站的地址前缀改成/ajax，这样就防止了跨越
        因为每个请求都是origin都是com.ajax:80,浏览器就检查不出跨域问题了。
        
        每个跨域请求都会带上 Origin请求头部 标识跨域资源请求
        如果这个请求源不是本服务器又没做跨域的处理就会产生跨域问题。
    
    ｝