跨域（CORS JSONP）

跨域关键知识

• 同源策略

  浏览器故意设计一个功能限制

• CORS

  突破浏览器限制的一个方法

• JSONP

  IE时代的妥协

同源的定义

• 源

  window.origin或location.origin可以当当前源

  源=协议+域名+端口号

• 如果两个url的协议，域名，端口号完全一致，那么这两个url就是同源的

• 举例

  baidu.com ，www.baidu.com不同源

同源策略的定义

• 浏览器规定 如果js运行在源A里，那么就只能获取源A的数据，不能获取源B的数据，即不允许跨域。也就是说不同源的页面之间，不准互相访问数据。
• 目的：保护用户的隐私

CORS跨域方法

例：1，创建qq-com,里面有server.js,用来模拟qq空间

2，创建huo-com里面有server.js用来模拟黑客网站

qq-com包含index.html,qq.js(js脚本文件)，friends.json模拟好友数据，端口监听8888

huo-com包含index.html,huo.js(js脚本文件)，端口监听为9999

正常情况下，在qq.com：8888里运行js可以访问到json数据，访问huo.com:9999运行js不能访问，因为浏览器需要CORS

• 这时只用在下响应头里加上Access-Control-Allow-Origin:url

只需要加上这句话，就可以实现跨域，没错就是这么简单！

JSONP跨域

CORS跨域如此简单，为什么还要JSONP呢，因为特立独行的IE不支持CORS，支持JSONP，我们需要注意的是JSONP和JSON是没有一点关系的!

跨域步骤（通过js实现）

• 将数据写到frinends.js里，写个占位就行（函数形式）

  

  然后在后台，拿到js内容，拿到数据，然后将数据填到js中，再返回给浏览器

• 在huo.com通过定义好的window.xxx函数引用它的js，

总结

在跨域的时候，由于当前浏览器不支持CORS,或因为某种原因不支持CORS,我们必须使用这种方式来跨域。方式：我们请求一个js文件，这个js文件会执行回调，回调里面就有我们要的数据(回调名字是随机生成的一个随机数，我们可以把这个名字以callback的参数传给后台，后台会把这个函数返回给我们，并执行。)

优点

兼容IE;可以跨域

缺点

script标签，拿不到状态码是什么和header;不支持post