1. 知识准备
1.1 同源策略
规定: 如果浏览器的地址与Ajax的请求地址 协议名称://域名地址:端口号 如果都相同则满足同源策略.浏览器可以正常的解析返回值. 如果三者之间有一个不同,则违反了同源策略.浏览器不会解析返回值.
1.2 什么是跨域
由于业务需要,通常A服务器中的数据可能来源于B服务器. 当浏览器通过网址解析页面时,如果页面内部发起ajax请求.如果浏览器的访问地址与Ajax访问地址不满足同源策略时,则称之为跨域请求.
跨域要素:
- 浏览器
- 解析ajax
- 违反了同源策略
2. 跨域的解决方式
2.1 JSONP跨域访问
2.1.1 JSONP介绍
JSONP(JSON with Padding)是JSON的一种**“使用模式”**,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的Javascript是的src属性可以在其他服务器上获取资源。利用Javascript的src
属性进行跨域访问的方式叫作JSONP
2.1.2 JSONP原理说明
- 利用javaScript中的src属性可以跨域的访问.
<script type="text/javascript" src="http://manage.jt.com/test.json"></script>
- 提前准备一个回调函数 callback()
/*定义回调函数 */
function hello(data){
alert(data.name);
}
- 将返回值结果进行特殊的格式封装. callback(JSON数据)
hello({"id":"1","name":"tom"})
2.2 CORS跨域实现
2.2.1 CORS介绍
因为出于安全的考虑, 浏览器不允许Ajax调用当前源之外的资源. 即浏览器的同源策略.
CORS需要浏览器和服务器同时支持。目前,所有主流浏览器都支持该功能,IE浏览器不能低于IE10。在浏览器端, 整个CORS通信过程都是浏览器自动完成,在请求之中添加响应头信息,如果服务器允许执行跨域访问.,则浏览器的同源策略放行.
2.2.2 跨域检验
说明: 由www.jt.com/test.html访问页面,之后内部由ajax发起请求. 得到如图的信息.信息中显示,几乎所有的浏览器都兼容CORS的方式,但是由于服务器不允许跨域,所以请求被拒.
2.2.3 配置后端服务器
/**
* 完成CORS跨域配置: 实现思路在请求的响应头中添加访问信息.
*/
@Configuration
public class CORSConfig implements WebMvcConfigurer{//web项目的全局配置的接口.
/**
* 参数介绍:
* 1.addMapping() 哪些请求可以进行跨域操作
* addMapping("/**") 表示所有访问后端的服务器的请求都允许跨域
* addMapping("/addUser/**") 表示部分请求可以跨域
* /* 只能拦截一级目录
* /** 可以拦截多级目录
*
* 2.allowedOrigins("*") 允许哪些网站跨域
* 3.allowCredentials(true) 请求跨域时是否允许携带Cookie/Session相关
* @param registry
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowCredentials(true);
//.maxAge(); 默认30分钟 是否允许跨域请求 30分钟之内不会再次验证
//.allowedMethods() 允许请求类型
}
}
2.2.4 响应信息
3. 关于跨域说明
- 什么叫跨域
浏览器
解析Ajax
时,发起url请求违反了同源策略
时,称之为跨域. - 什么时候用跨域
一般A服务器需要从B服务器中获取数据时,可以采用跨域的方式. - 什么是JSONP
JSONP
是JSON的一种使用模式 利用javaScript
中的src
属性进行跨域请求.(2.自定义回调函数,3.将返回值进行特殊格式封装) - 什么是CORS
CORS
是当前实现跨域的主流方式,现在所有的主流浏览器都支持,需要在服务器端配置是否允许跨域的配置. 只要配置了(在响应头中添加允许跨域的标识),则同源策略不生效,则可以实现跨域.