跨域实现——JSONP方式与CORS方式

最新推荐文章于 2020-12-07 14:36:15 发布

xiaoyangzlqqq

最新推荐文章于 2020-12-07 14:36:15 发布

阅读量150

点赞数

文章标签： java javascript jquery js ajax

本文链接：https://blog.csdn.net/xiaoyangzlqqq/article/details/109749500

版权

1.同源策略

规定：
1.如果浏览器的地址与Ajax的请求地址：协议名称://域名地址:端口号 ，如果都相同则满足同源策略，那么浏览器可以正常的解析返回值。
2.如果三者之间有一个不同,则违反了同源策略，浏览器不会解析返回值。

例：
浏览器URL地址: http://manage.jt.com/test.html
页面AjaxURL地址: http://manage.jt.com/test.json
页面结构：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试JSON跨域问题</title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$.get("http://manage.jt.com/test.json",function(data){
			alert(data.name);
		})
	})
</script>
</head>
<body>
	<h1>JSON跨域请求测试</h1>
</body>
</html>

数据结构：{“id”:“1”,“name”:“tom”}
分析：协议:域名:端口都相同时,请求可以正常执行。

2.跨域

由于业务需要,通常A服务器中的数据可能来源于B服务器. 当浏览器通过网址解析页面时,如果页面内部发起ajax请求.如果浏览器的访问地址与Ajax访问地址不满足同源策略时,则称之为跨域请求.
跨域要素:
1.浏览器；
2.解析ajax；
3.违反了同源策略。

3.跨域方式

3.1JSONP跨域访问

3.1.1JSONP介绍

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通。

3.1.2 JSONP跨域原理

1.利用javascrpit中的src属性实现跨域请求；

<script type="text/javascript" src="http://manage.jt.com/test.json"></script>

2.提前自定义回调函数 function callback(xxxx)；

/*定义回调函数  */
		function hello(data){
			alert(data.name);
		}

3.将返回值结果进行特殊的格式封装 callback(json)；

hello({"id":"1","name":"tom"})

4.由于利用src属性进行调用所以只能支持get请求类型。
例：
页面JS：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试JSON跨域问题</title>	
	<script type="text/javascript">
		/*JS是解释执行的语言  */
		/*定义回调函数  */
		function hello(data){
			alert(data.name);
		}
	</script>
	<!--该json一直保存到浏览器中等待调用,但是没有函数名称无法调用  -->
	<script type="text/javascript" src="http://manage.jt.com/test.json"></script>
	<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
</head>
<body>
	<h1>JS跨域问题</h1>
</body>
</html>

封装返回值：

hello({"id":"1","name":"tom"})

效果实现：

3.1.3JSONP优化——高级API

1.编辑前端WEB页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP测试</title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){ //让页面加载完成之后再次执行
		alert("测试访问开始!!!!!")
		$.ajax({
			url:"http://manage.jt.com/web/testJSONP",
			type:"get",				//jsonp只能支持get请求
			dataType:"jsonp",       //dataType表示返回值类型
			jsonp: "callback",    //指定参数名称
			jsonpCallback: "hello",  //指定回调函数名称
			success:function (data){   //data经过jQuery封装返回就是json串
				alert(data.id);
				alert(data.name);
				//转化为字符串使用
				//var obj = eval("("+data+")");
				//alert(obj.name);
			}	
		});	
	})
</script>
</head>
<body>
	<h1>JSON跨域请求测试</h1>
</body>
</html>

2.JSON页面请求分析
说明：用户访问前端服务器地址：www.jt.com——>F12——>看到请求URL为：manage.jt.com…(跨域访问)

毫秒数作用：由于浏览器进行业务请求时可能有缓存操作，所以添加毫秒数，避免浏览器将结果缓存，导致业务异常。
3.编辑后端服务器

package com.jt.web;

import com.fasterxml.jackson.databind.util.JSONPObject;
import com.jt.pojo.ItemDesc;
import com.jt.util.ObjectMapperUtil;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class WebJSONPController {
    /**
     * 完成JSONP跨域访问
     * url地址: http://manage.jt.com/web/testJSONP?callback=hello&_=1605584709377
     * 参数:    callback 回调函数的名称
     * 返回值:  callback(json)
     */
    @RequestMapping("/web/testJSONP")
    public JSONPObject testJSONP(String callback){
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(1000L).setItemDesc("JSONP远程调用!!!");
        JSONPObject jsonpObject = new JSONPObject(callback, itemDesc);
        return jsonpObject;
    }
}

3.2CORS跨域实现

3.2.1CORS介绍

因为出于安全的考虑，浏览器不允许Ajax调用当前源之外的资源。（即浏览器的同源策略）
CORS需要浏览器和服务器同时支持。目前所有主流浏览器都支持该功能，IE浏览器不能低于IE10。在浏览器端，整个CORS通信过程都是浏览器自动完成，在请求之中添加响应头信息，如果服务器允许执行跨域访问，则浏览器的同源策略放行。

3.2.2CORS跨域检验

说明: 由www.jt.com/test.html访问页面,之后内部由ajax发起请求，得到如图的信息，信息中显示，几乎所有的浏览器都兼容CORS的方式，但是由于服务器不允许跨域，所以请求被拒。

3.2.3配置后端服务器

由于跨域需求其他的服务器也会需要跨域，所以在jt-common（存放共性的配置）中添加跨域的配置。

package com.jt.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
 * 完成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() 允许请求类型
    }
}

3.2.4响应信息

4.有关跨域总结

什么叫跨域：浏览器解析Ajax时，发起url请求违反了同源策略时，称之为跨域。
什么时候用跨域：一般A服务器需要从B服务器中获取数据时，可以采用跨域的方式。
什么是JSONP：JSONP是JSON的一种使用模式，实现步骤：(1)利用javaScript中的src属性进行跨域请求；(2)自定义回调函数；(3)将返回值进行特殊格式封装。
什么是CORS：CORS是当前实现跨域的主流方式，现在所有的主流浏览器都支持，需要在服务器端配置是否允许跨域的配置。只要配置了(在响应头中添加允许跨域的标识)，则同源策略不生效，则可以实现跨域。