JSONP和跨域
2017-05-19 本文已影响12人
kumabearplus
1、什么是同源策略?
- 浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。
- 本域指的是：
- 同协议：如都是http或者https、ftp
- 同域名：如都是http://jirengu.com/a 和(http://jirengu.com/b
- 同端口：如都是80端口
http://jirengu.com:8080/a/b.js)和http://jirengu.com:8080/index.php
- 不同源的例子：
- http://www.baidu.com和https://www.baidu.com（协议不同）
- http://www.baidu.com和http://www.cdn.baidu.com（域名不同）
- http://www.baidu.com和http://www.baidu.com:8080（端口不同）
需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域
2、什么是跨域？跨域有几种实现形式？
- 跨域是不同源之间的数据交互
- 四种方式：
- JSONP
- CORS：跨域资源共享（Cross-Origin Resource Sharing）
- 降域
- postMessage()
3、JSONP 的原理是什么
域名网页1通过url发送一个callback 带有形参的函数名到域名网页2下，另外域名网页2把数据和获取的函数名包装成一个函数的调用，把整个函数调用的形式 callback("获取的数据")一并发送回域名网页1，域名网页1通过响应的 callback("获取的数据") 执行这个带有形参的函数，获取的数据就是跨域实现的，叫JSONP
// 网页1：http://localhost:8080/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP</title>
</head>
<body>
<ul class="lists"></ul>
<button class="btn">换一组</button>
<script type="text/javascript" src='jquery/jquery-3.2.1.min.js'></script>
<script type="text/javascript">
//var lists = $('.lists')
//var btn = $('.btn')
var $lists = $('.lists')
var $btn = $('.btn')
$btn.on('click',function(){
var $script = $('<script>' + '</scr\ipt>')
$script.attr('src','http://book.kuma.com:8080/getNew?callback=appendHtml')
$('head').append($script)
//$('head').remove($script) 这个有问题
$('head script').remove()
})
/*
btn.addEventListener('click',function(){
var script = document.createElement('script')
script.src = 'http://book.kuma.com:8080/getNew?callback=appendHtml'
document.head.appendChild(script)
document.head.removeChild(script)
})
*/
function appendHtml(data){
var htmls = ''
for (var i = 0; i < data.length; i++) {
var li = '<li>' + data[i] + '</li>'
htmls += li
}
//lists.innerHTML = htmls
$lists.html(htmls)
//$lists.append(htmls)
}
/*
function $(cls){
return document.querySelector(cls)
}
*/
</script>
</body>
</html>
// 网页2：http://book.kuma.com:8080/getNew?callback=appendHtml
app.get('/getNew',function(req,res){
var cb = req.query.callback
var news = [
'团中央给单身找伴侣 帮得了你吗',
'这个贪官行贿3亿 为何只判了4年',
'夫妇亲热遭偷拍 被平台现场直播',
'熊黛林现身"捞金" 拒谈过往情事',
'汪东城晒孙悟空造型照 画面穿越',
'邹市明生日会 与冉莹颖恩爱互动',
'马苏获奖后台画风突变 搞怪自拍',
'美泄密士兵服刑7年:狱中想变性',
'英大选党派竞选 宣言"脱欧"为主',
'特朗普发推文反驳指控:政治迫害',
'韩"萨德"纷争再起 撤走可能性小'
]
var arr = []
for (var i = 0; i < 3; i++) {
var data = parseInt(Math.random()*news.length)
arr.push(news[data])
//把取出的这条新闻在原json数组中删除，防止再次取到
news.splice(data,1)
}
res.send(cb + '(' + JSON.stringify(arr) + ')')
})
4、CORS是什么
CORS（Cross-Origin Resource Sharing，跨域资源共享），定义了在必须访问跨域资源时，使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。在发送请求时，需要额外附一个 Origin 头部，其中包含请求页面的原信息（协议、域名、端口），服务器根据这个头部信息决定是否给予响应。如果服务器认为这个请求可以接受，就在 Access-Control-Allow-Origin 头部中回发相同的源信息（如果是公共资源，可以回发 *），如果没有这个头部，或者有这个头部但源信息不匹配，浏览器就会驳回请求。
