前端交互篇 - 跨域
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 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
升级方案 - oauth2.0
利用oauth2.0 token验证的方式, 网关层代理及nginx代理解决跨域问题和权限验证的问题