同源策略 :
- 是由网景公司提出的一个著名的安全策略.现在所有支持JavaScript的浏览器都会使用这个策略.
- 所谓同源是指 : 域名 协议 端口相同.
- 例如 : 两个项目之间,端口不同.项目一向项目二发送请求的时候.
- 项目二可以接受,也可处理.但是不能向项目一响应数据.
- 会报一个 --已拦截跨源请求:同源策略禁止🚫读取位置项目一ip+端口+路径的远程资源.(原因:CORS头缺少'Access-Control-Allow-Origin'.
- !!!这里要注意 : 项目二中的访问已经发生,说明是浏览器对非同源请求返回的结果做了拦截
Jsonp(只支持GET请求)
- jsonp是json用来跨域的一个东西. 它的原理是通过script标签的跨域特性来绕过同源策略.
- Json是数据交换的格式,
- jsonp是数据传递双方约定的方式
1.png
2.png
- 看! 这是算不算是跨了个站.
继续
- 在项目一中 创建一个script标签
- 在src里面,填写你要访问的跨域路径,也就是项目二的ip+端口+路径
- 现在 你再刷新项目一的页面,就会触发script标签,此时会打印出来项目二中传来的值
以上
- 就是jsonp简单的实现模式,也可说是jsonp的原型; 创建一个回调函数,然后在远程服务上调用这个函数并且将json数据形式作为参数传递,完成回调.
划重点!
- 将JSON数据填充进回调函数,这就是JSONP的 JSON+Padding的含义
- JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
一般情况下,我们会希望这个script标签能够动态的调用,而不是像项目一中因为固定在html中。
demo
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<input type="button" onclick="Jsonp1();" value='提交'/>
</p>
<p>
<input type="button" onclick="Jsonp2();" value='提交'/>
</p>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
function Jsonp1(){
var tag = document.createElement('script');
tag.src = "http://c2.com:8000/test/";
document.head.appendChild(tag);
document.head.removeChild(tag);
}
function Jsonp2(){
$.ajax({
url: "http://c2.com:8000/test/",
type: 'GET',
dataType: 'JSONP',
success: function(data, statusText, xmlHttpRequest){
console.log(data);
}
})
}
</script>
</body>
</html>
网友评论