前端，跨域

何为跨域？

 

 

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还要方便。