8.从零搭建WebApi接口开发框架-解决跨域请求
2017-12-25 本文已影响0人
孔垂云
前后端分离的架构，跨域请求是首先要解决的问题。跨域问题出现的场景就是浏览器想访问别的应用的url，常见就是ajax请求。比如当前的web应用地址是http://localhost:8081，想访问http://localhost:8080的接口应用，这时候浏览器会报No 'Access-Control-Allow-Origin' header is present on the requested resource.错误，这就是当前页面要请求的接口不允许跨域导致的。
解决后端跨域请求有很多种实现方式，比如nginx设置跨域，springMVC增加过滤器，利用jsonp，等等。SpringBoot为了简化跨域实现，增加了CorsConfiguration的工具类，这里主要讲SpringBoot自带的CorsConfiguration。
CoreConfiguration实现
@Configuration
public class CorsConfig {
/**
* 配置跨越的参数
*
* @return 配置信息
*/
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1
corsConfiguration.addAllowedHeader("*"); // 2
corsConfiguration.addAllowedMethod("*"); // 3所有请求方法
return corsConfiguration;
}
/**
* 加入过滤器
*
* @return 过滤器
*/
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 4
return new CorsFilter(source);
}
}
原理就是利用Filter来实现：
- 允许任何域名使用
- 允许任何头
- 允许任何方法（post、get等）
test.htm测试界面
为了演示一下跨域请求，做了一个测试界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
<script>
$.ajax({
url: 'http://localhost:8080/checkLogin',
type:'post',
contentType:'application/json',
data: JSON.stringify({
"username":"admin","password":"123456"
}),
success: function (result) {
alert(result.success)
}
});
</script>
非常简单，就是页面直接通过ajax请求来调用http://localhost:8080/checkLogin接口模拟登录。
如果不设置跨域请求，通过谷歌浏览器，会提示如下错误：
不加跨域设置.png
加上跨越请求：
实现跨域.png
这里有一点需要注意，一个正常的ajax请求，会向服务器发送两个请求，第一个是OPTIONS请求，用于验证http通道是否通畅，第二个才是正常的请求。
请求.png
