特别说明
经本人简单(黑盒)测试，当满足跨域要求（协议、ip、端口至少有一个不一致）时,Ajax请求是否会出现跨域问题,取决于Ajax请求的contentType类型,这里简单试了几个contentType类型:
当满足跨域要求（协议、ip、端口至少有一个不一致）时,如果当前端Ajax请求的contentType类型为text/plain或application/x-www-form-urlencoded或multipart/form-data等时,不会发生跨域问题;而当前端contentType为application/json或text/html等时,会发生跨域问题。
SpringMVC后端代码处理跨域问题
创建处理跨域问题的配置类
注:该类的位置(与启动类同包或启动类的子孙包下)以保证其能注入Spring容器。
注:本人这里创建的项目是SpringBoot项目。
具体代码为
/**
* WebMvc配置
* 注:根据实际情况重写对应的方法即可
*
* @author JustryDeng
* @Date 2018年8月22日 下午6:38:52
*/
@Configuration
public class CorsConfigure extends WebMvcConfigurationSupport {
/*
* 这里主要为了解决跨域问题,所以重写addCorsMappings方法
*/
@Override
protected void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "HEAD", "POST","PUT", "DELETE", "OPTIONS")
.allowedHeaders("*")
.exposedHeaders("access-control-allow-headers",
"access-control-allow-methods",
"access-control-allow-origin",
"access-control-max-age",
"X-Frame-Options")
.allowCredentials(false).maxAge(3600);
super.addCorsMappings(registry);
}
}测试一下
第一步:新建一个项目(本人创建的是SpringBoot项目),创建controller并简单写一个测试方法:
注:简单配置一下端口什么的,这里就不再给出示例了。
第二步:创建一个简单的前端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域问题测试</title>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
function doajax() {
$.ajax({
type: "post",
contentType: "application/json", //有 跨域问题
// contentType: " text/html", //有 跨域问题
// contentType: "application/x-www-form-urlencoded", //无 跨域问题
// contentType: "multipart/form-data",//无 跨域问题
// contentType: "text/plain", //无 跨域问题
url: "http://127.0.0.1:9527/test",
success: function (message) {
alert("成功！");
},
error: function (message) {
alert("失败！");
}
});
}
</script>
<style>
div {
width: 300px;
height: 180px;
background-color: chartreuse;
color: blueviolet;
font-size: 40px;
font-family: 华文彩云;
font-weight: bolder;
border-radius: 20%;
border: red 2px solid;
margin: auto;
}
div:hover {
cursor: pointer;
}
.theFont {
display: inline-block;
margin-left: 40px;
margin-top: 70px;
}
</style>
</head>
<body>
<div onclick="doajax()">
<span class="theFont">AJAX...走你</span>
</div>
</body>
</html>第三步:打开编写的html文件
注:由于我是直接由前端开发工具WebStorm打开的,所以会有一个localhost:63342这样的地址
注:后端项目本人这里配置的是9527。即:http://localhost:63342与http://localhost:9527之间端口不同,属于跨域
第四步:启动后端项目;打开浏览器、打开html文件、打开F12开发者工具,然后点击图标，触发异步方法，请求后端
可以看见,此时报403“资源不可用”的错误;这里是由于跨域导致的。
第五步:在后端配置允许跨域
第六步:重启项目后，再次重复上面的一至四步,使用Ajax访问后端
此时，请求成功。由此可见:后端配置允许跨域,配置成功!
再次说明:
经本人测试,当满足跨域要求（协议、ip、端口至少有一个不一致）时,如果当前端Ajax请求的contentType类型为text/plain或application/x-www-form-urlencoded或multipart/form-data等时,不会发生跨域问题;而当前端contentType为application/json或text/html等时,会发生跨域问题。
如有不当之处，欢迎指正