从demo开始理解跨域

向右看齐 2022-03-08 05:14 51阅读 0赞

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

### 重现跨域Demo步骤 ###

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

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

<%
    response.getWriter().write("hahahaha");
    response.getWriter().close();
    %>

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

1.  启动2个tomcat，访问`http://127.0.0.1:8081/app1/index.jsp`,报错如下  
    ![在这里插入图片描述][20190314130324299.png]

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.  如何解决  
    在第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();
    %>

加入  
`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个不同就会被认为是不同源。例如上面  
`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  
![在这里插入图片描述][20190314140122788.png]  
response  
![在这里插入图片描述][2019031414020814.png]

注意到在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][http_127.0.0.1_8081_app1_index.jsp]`"/>` ，jsonp就是利用了这个src不限制来绕过浏览器的拦截。

### springboot 中的解决方案 ###

[spring mvc的cors][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...
        }
    }

*  方案2. @CrossOrigin

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

*  方案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);
    }

[20190314130324299.png]: /images/20220308/1434069d7e744c8887412313c4f23494.png
[20190314140122788.png]: /images/20220308/1a6566d376464d41bcc1801fac65e01e.png
[2019031414020814.png]: /images/20220308/f57739b4d8ff4192a7191d7afb6d604a.png
[http_127.0.0.1_8081_app1_index.jsp]: http://127.0.0.1:8081/app1/index.jsp
[spring mvc_cors]: https://docs.spring.io/spring/docs/5.1.5.RELEASE/spring-framework-reference/web.html#mvc-cors