JSONP和跨域

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



  
  


  

  换一组
  
  

// 网页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 头部中回发相同的源信息（如果是公共资源，可以回发 *），如果没有这个头部，或者有这个头部但源信息不匹配，浏览器就会驳回请求。

5、 根据视频里的讲解演示三种以上跨域的解决方式

github