跨域访问

1 同源策略

浏览器在解析ajax时,如果发现请求的协议名称😕/请求的域名:请求的端口号与网址的地址都相同的时候满足同源策略的规定,浏览器可以正确的解析返回值.该访问称之为同域访问.该策略叫做同源策略.

2 跨域访问

违反了同源策略中的任意一条,则叫做跨域访问

3 跨域访问的方式

3.1 JSONP实现跨域

3.1.1 JSONP概念

利用HTML中

3.1.2 JSONP实现跨域的原理

1. javaScript中的src属性不受同源策略的约束.可以获取远程服务器数据
2. 定义回调函数
3. 将返回值结果进行封装

3.1.3 JSONP的Ajax调用

<script type="text/javascript">
	$(function(){
		alert("测试访问开始!!!!!")
		$.ajax({
			url:"http://manage.jt.com/web/testJSONP",
			type:"get",				//jsonp只能支持get请求 src只能是get请求
			dataType:"jsonp",       //dataType表示返回值类型
			//jsonp: "callback",    //指定参数名称
			//jsonpCallback: "hello",  //指定回调函数名称
			success:function (data){   //data经过jQuery封装返回就是json串
				alert(data.itemId);
				alert(data.itemDesc);
			}
		});	
	})
</script>

3.2 CORS跨域方式

3.2.1 CORS概念

当下的主流的浏览器默认支持cors跨域的形式,但是需要服务器添加响应的信息.否则浏览器不支持数据的获取

3.2.2 CORS的实现

添加CORS配置类

public class CORSConfig implements WebMvcConfigurer {

    /**
     * 实现跨域的方式
     * 需要配置服务端程序
     * 方法说明:
     *      1.addMapping(/**) 允许什么样的请求可以跨域  所有的请求
     *      2.allowedOrigins("*")可以允许任意的域名
     *      3.allowCredentials(true) 跨域时是否允许携带cookie等参数
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true);
    }
}