一、什么是跨域?
1、域:协议 + 域名 + 端口;三者完全相同则为同域,反之有其一不同均为不同域。
2、跨域请求:当前【发起请求】的域和【请求指向】的域属于不同域时,该次请求称之为跨域请求。
3、同源限制:浏览器针对跨域请求做出同源限制资源访问,Cookie、LocalStorage 和 IndexDB 无法跨域问;
4、DOM元素无法跨域访问;Ajax无法跨域请求。
二、跨域请求被谁拦截? test.html代码如下:
<!DOCTYPE html>
<html>
<head>
<title>使用ajax发送请求</title>
<!-- 引入jq需要的js,可以上jq菜鸟教程里面复制这个js,是在线的,联网即可用 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#send").click(function(){
$.ajax({
url: "http://localhost:8080/user/getUser",
type: "GET",
success: function (result) {
console.log(result);
}
});
})
});
</script>
</head>
<body>
<button id="send">发送请求</button>
</body>
</html>
1、 看上面的图,我们可以看到当前台发送请求时,可以看到后台并没有拦截,只是在数据返回前台的时候出问题。
2、总结:域名和端口不同时的跨域,并非浏览器拦截发起请求,实际请求可以正常到达指向的资源,也可以正常返回,只 是浏览器拦截了返回内容。协议不同时,例如https发起Ajax跨域请求到http,则部分浏览器(Chrome,Firefox)会直接拦截请求,请求无法到达指向的资源。
三、解决办法:
1、创建一个全局配置类:CorsConfig.java(工程目录如下:)
CorsConfig.java代码如下:
package com.xsy.Configuration;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
@Bean
public CorsConfiguration corsConfiguration() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
//实际请求中允许携带的首部字段
corsConfiguration.addAllowedHeader("*");
//允许那些域跨域访问
corsConfiguration.addAllowedOrigin("*");
//允许那些请求方法
corsConfiguration.addAllowedMethod("*");
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter(CorsConfiguration corsConfiguration) {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", corsConfiguration);
return new CorsFilter(source);
}
}
此时可以看到已经可以访问到数据了
四、小提示
1、如果只是个别方法需要跨域访问的话,可以使用 @CrossOrigin(origin="*")来进行跨越:
使用如下:
在方法级别上只需要加上@CrossOrigin(origin="*")再次跨域请求即可正常访问: