何为跨域？

 

 

1.什么是同源

同源： 同源策略：浏览器故意设置的一个功能限制，同源定义源：window.origin或location.origin可以得到当前源；源=协议+域名+端口号；如果两个url的：协议+域名+端口号，完全一致，那么这两个url就是同源的 同源策略定义 浏览器规定 如果JS运行在第一个源A里，那么就只能获取源A的数据 不能获取源B的数据，即不允许跨域 举例 （省略http协议） 假设frank.com/index.html引用了cdn.com/1.js 那么就说[1.js运行在源frank.com里] 注意跟cdn.com没有关系，虽然1.js从它那里下载 所以1.js只能获取frank.com的数据 不能获取1.frank.com或者qq.com的数据 这是浏览器的功能。

---

2.什么是跨域

跨域： 跨域简单的说就是突破浏览器对于不同源的限制 例如： 现在有两个网站一个是qq.com一个是frank.com（黑客网站），frank.com想要访问qq.com里面的friends.json 正常使用AJAX 在qq.com:8888里运行的JS可以访问/friends.json 黑客偷数据 在frank.com:9999里运行的JS不能访问！ 原因就是因为浏览器的同源策略导致frank.com不能访问qq.com中的数据！所以解决这个问题的方法就名为跨域（穿过，跨过限制我的域） 因此我们需要引入一个新的东西为CORS以及JOSNP

---

3.什么是JSONP跨域

为了兼容IE或者一些更新迟缓的浏览器我们需要使用到JSONP 但是！JSONP和JSON没有半毛钱关系（ps：由于以前的前端水平地下，错误地将其称为JSONP） 实现步骤： 虽然浏览器不允许我们访问qq.com:8888/fridens.json中的数据，但是我们能创建一个js文件即引用qq.com:8888/friends.js啊！ 对没错，我们可以引用js，那么就让js包含json数据不就行了吗！oh！发现了解决问题的方法，那么如何实现呢具体步骤如下??： 1.qq.com将数据写到/friends.js 2.frank.com用script标签引用/friends.js 3./friends.js执行，执行什么呢？ 4.frank.com实现定义好window.xxx函数 5./friends.js执行window.xxx({friends:[...]}) 6.然后frank.com就通过window.xxx获取到数据了 7.window.xxx就是一个回调啊！ 这样就完美解决了跨域的问题！真是一个天才的解决思路，而这个思路就是许多先辈们一起想出来的解决方法！

---

4.什么是CORS跨域

问题根源： 浏览器默认不同源之间不能互相访问数据 但是qq.com和frank.com其实都是我的网站 我就是想要两个网站互相访问，浏览器为什么阻止 好吧,用CORS 浏览器说，如果要共享数据，需要提前声明 那怎么声明呢？ 浏览器说，qq.com在响应头里写frank.com可以访问 那具体语法呢？ Access-Control-Allow-Origin：http://foo.example 可以查看MDN文档 代码示例： ? 就如同红线框出的东西一样，就是一段代码解决所有问题！简洁方便，是不是比JSONP还要方便。