CORS 支持
前端页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域测试</title>
</head>
<body>
<button id="test">测试</button>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("#test").on("click", function() {
$.ajax({
"url": "http://localhost:8080/fastjson/test",
"type": "get",
"dataType": "json",
"success": function(data) {
console.log(data);
}
})
});
});
</script>
</body>
</html>
通过 http 容器启动前端页面代码，笔者使用 Sublime Text 的插件启动的，测试结果如下：
[图片上传中...(image-3b3eb7-1524637441592-2)]
从图中可知，前端服务器启动端口为 8088 与后端服务器 8080 不同源，因此出现跨域的问题。
现在开始解决跨域问题，可以两种维度控制客户端请求。
粗粒度控制：
方式一
@Configuration
public class WebConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/fastjson/**")
.allowedOrigins("http://localhost:8088");// 允许 8088 端口访问
}
};
}
}
方式二
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter{
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/fastjson/**")
.allowedOrigins("http://localhost:8088");// 允许 8088 端口访问
}
}
配置后，重新发送请求，结果如下：
[图片上传中...(image-952f80-1524637441591-1)]
细粒度控制：
在 FastJsonController 类中的方法上添加 @CrossOrigin(origins="xx") 注解：
[图片上传中...(image-599aa7-1524637441591-0)]
在使用该注解时，需要注意 @RequestMapping 使用的请求方式类型，即 GET 或 POST。
网友评论