从demo开始理解跨域_跨域demo

网上很的文章说跨域问题，但都是从理论上来说，我这篇从demo开始

重现跨域Demo步骤

1. 起2个tomcat
2. 在第1个tomcat的webapp下建立文件夹app1,在app1里新建立一个index.jsp，内容如下

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>

 $.get("http://127.0.0.1:8081/app2/index.jsp",function(data){        
		  alert("Data Loaded: " + data);
});
</script>
1
2
3
4
5
6
7

3. 在第2个tomcat的webapp下建立文件夹app2,在app2里新建立一个index.jsp，内如如下

<%
response.getWriter().write("hahahaha");
response.getWriter().close();
%>
1
2
3
4

注意：第2个tomcat端口号改成 8081

4. 启动2个tomcat，访问http://127.0.0.1:8081/app1/index.jsp,报错如下
   

Failed to load http://127.0.0.1:8081/app2/index.jsp: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access.
1

这就是经典的跨域问题

5. 如何解决
   在第2个tomcat的index.jsp里改成

<%
response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8080");
response.setHeader("Cache-Control","no-cache"); 
response.getWriter().write("hahahaha");
response.getWriter().close();
%>
1
2
3
4
5
6

加入
response.setHeader("Access-Control-Allow-Origin", "*");
表示告诉浏览器放行。

跨域原因

重要的一点跨域是由浏览器产生的拦截。如果通过 java 去调用是不会产生跨域，换句话tomcat1中的app1去调用 tomcat2中的app2是不会产生问题的。如下，将第1个tomcat的index.jsp里代码改成如下,第2个tomcat 的index.jsp里的没有加response.setHeader("Access-Control-Allow-Origin", "*");

<%@ page import="java.io.*"%>
<%@ page import="java.net.*"%>
<%
URL url = new URL("http://127.0.0.1:8081/app2/index.jsp");
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
PrintWriter printWriter = null;
conn.setRequestMethod("POST");
//设置通用的请求属性
            conn.setRequestProperty("accept", "*/*");
            conn.setRequestProperty("connection", "Keep-Alive");
            conn.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)"); 
            conn.setDoOutput(true);
            conn.setDoInput(true);
//获取URLConnection对象对应的输出流
            printWriter = new PrintWriter(conn.getOutputStream());
//发送请求参数即数据
            printWriter.print("");
//缓冲数据
            printWriter.flush();
//获取URLConnection对象对应的输入流
            InputStream is = conn.getInputStream();
//构造一个字符流缓存
            BufferedReader br = new BufferedReader(new InputStreamReader(is));
            String str = "";
			
            while ((str = br.readLine()) != null) {
				//写入到页面
                response.getWriter().write(str);
            }
          
            is.close();
            //断开连接，最好写上，disconnect是在底层tcp socket链接空闲时才切断。如果正在被其他线程使用就不切断。
            //固定多线程的话，如果不disconnect，链接会增多，直到收发不出信息。写上disconnect后正常一些。
            conn.disconnect();  
            response.getWriter().close();			
%>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

浏览器拦截的依据

浏览器产生的拦截的依据是同源策略，
协议，域名，端口号 三者有任意1个不同就会被认为是不同源。例如上面
http://127.0.0.1:8080/app1/index.jsp
http://127.0.0.1:8081/app1/index.jsp
就是端口不同而产生的。
假如把app1和app2放在一个 tomcat里是不会产生问题的。

再回到上面例子中看http里的request 和response
request

response

注意到在ajax请求的request header里有个origin,表示是从什么url发起的请求。

reponse header里有Access-Control-Allow-Origin:*

浏览器拦截的依据应该就在于此。Access-Control-Allow-Origin表示告诉浏览器任何域名都放行，否则就拦截。如果 Access-Control-Allow-Origin: http://127.0.0.1:8080 表示origin是http://127.0.0.1:8080才放行。

还有1点需要注意是只要是src的就不会产生跨域问题。
例如index.jsp里
<iframe src="http://127.0.0.1:8081/app1/index.jsp"/> ，jsonp就是利用了这个src不限制来绕过浏览器的拦截。

springboot 中的解决方案

spring mvc的cors
提供了好几种解决方案。无论如何配置，原理都是上面的原理。

• 方案1. 通用配置

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/api/**")
            .allowedOrigins("http://domain2.com")
            .allowedMethods("PUT", "DELETE")
            .allowedHeaders("header1", "header2", "header3")
            .exposedHeaders("header1", "header2")
            .allowCredentials(true).maxAge(3600);

        // Add more mappings...
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 方案2. @CrossOrigin

@CrossOrigin(origins = "http://domain2.com", maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {
...
}
1
2
3
4
5
6

• 方案3. 加filter

@Bean
public CorsFilter corsFilter(){
	CorsConfiguration config = new CorsConfiguration();
	
	// Possibly...
	// config.applyPermitDefaultValues()
	
	config.setAllowCredentials(true);
	config.addAllowedOrigin("http://domain1.com");
	config.addAllowedHeader("*");
	config.addAllowedMethod("*");
	
	UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
	source.registerCorsConfiguration("/**", config);
	
	CorsFilter filter = new CorsFilter(source);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17