前端交互篇 - 跨域

灰太狼 2021-11-16 08:54 326阅读 0赞

# 前端交互篇 - 跨域 #

--------------------

### SpringBoot - Cors解决跨域问题 - 本地请求其他域名时cookie无法传输 ###

SpringBoot 利用Cors解决跨域问题
    
    1.依赖
    <dependency>
    	<groupId>org.springframework.boot</groupId>
    	<artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    2.WebConfig配置类
    @Configuration
    public class WebConfig implements WebMvcConfigurer { 
    
        @Override
        public void addCorsMappings(CorsRegistry registry) { 
            registry.addMapping("/**")               // 表示本应用的所有方法都会去处理跨域请求
                    .allowedOrigins("*")             // 例如允许：http://localhost:8081请求
                    .allowedMethods("*")             // 表示允许通过的请求数
                    .allowedHeaders("*")             // 表示允许通过的请求头
                    .allowCredentials(true);         // 允许前端传递cookie
        }
    }
    
    3.HTML测试代码
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body onload="testCors()">
    	</body>
    	<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    		function testCors() { 
    			$.ajax({ 
       			type:'POST',
       			url:'http://127.0.0.1:10909/apis/test',
       			xhrFields:{ withCredentials:true},
       			success:function(result){ 
    				alert(result)
       			},
       		    error: function (err) { 
       		    	alert("异常")
       		    }
       		}); 
    		}
    	</script>
    </html>

### 过滤器- CROS协议 ###

@Component
    @WebFilter(filterName = "corsFilter", urlPatterns = "/*")
    public class CorsFilter implements Filter { 
    
        public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { 
            HttpServletResponse response = (HttpServletResponse) servletResponse;
            HttpServletRequest reqs = (HttpServletRequest) servletRequest;
    
            String origin = reqs.getHeader("Origin");
            if(StringUtils.isEmpty(origin)) { 
                origin = reqs.getHeader("Referer");
            }
    
            response.setHeader("Access-Control-Allow-Origin", origin);
            response.setHeader("Access-Control-Allow-Credentials", "true");
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,Authorization,Token");
            filterChain.doFilter(servletRequest, servletResponse);
        }
    }
    
    // 重点 cookie处设置 根目录 -> nginx,com结尾网站都可用
    Cookie cookie = new Cookie("auth_todo_token", MD5Util.MD5(username+password)+MD5Util.MD5(password+username));
    cookie.setPath("/");
    cookie.setDomain("nginx.com");
    
    // 重点：本地开发host配置 -> 正式上线后项目Domain依据真实后缀修改即可
    127.0.0.1    test.nginx.com
    47.93.6.66   server.nginx.com
    
    // Html - Ajax请求：
    $.ajax({ 
    	type:'POST',
    	url:'http://server.nginx.com:10909/apis/loginAccess',
    	// 重点：携带跨域cookie
    	xhrFields: { 
    		withCredentials: true
    	},
    	.....
    });

### 最佳方案 - Nginx解决跨域问题 ###

跨域问题产生原因: 
    
    域名[主域名与子域名也算]不同
    端口不同
    协议不同
    特注：Ip与域名之间网络交互，也属于跨域，如：123.23.23.12 和 www.a.com
    
    因此通过nginx进行反向代理解决该问题
    
    如: nginx部署静态资源 -> 地址为 127.0.0.1/html/index.html
    
                           接口地址为： 111.111.111.111:8080/apis/test
                           
    则可以通过nginx 将127.0.0.1 配置前缀的方式代理真实接口地址即：
    127.0.0.1/apis/* ===> 111.111.111.111:8080/apis/test 然后本地界面请求即不会产生跨域问题, 部署详情见nginx篇

### 升级方案 - oauth2.0 ###

利用oauth2.0 token验证的方式, 网关层代理及nginx代理解决跨域问题和权限验证的问题