# 1. 同源策略

所谓"同源"是指协议端口号域名相同,那么"跨域"就可以理解为不同源的网站之间的访问,最常见的应用是当我们调用ajax接口时如果不设置跨域浏览器会报错,这证明使用xmlHttpRequest 对象不能发送跨域请求。

有疑惑的小伙伴肯定会问,那我用a标签和script标签请求其他网站,是不是就是跨域了呢?

这里要明白跨域是指在当前域下调用其他域下的东西,而链接则是直接跳转到对方的域下了,跟你之前的域名毫无关系。

# 2. JSONP实现跨域的原理

通过动态构建 script 标签来实现跨域请求,因为浏览器对 script 标签的引入没有跨域的访问限制 。通过在请求的 url 后指定一个回调函数,然后服务器在返回数据的时候,构建一个 json 数据的包装,这个包装就是回调函数,然后返回给前端,前端接收到数据后,因为请求的是脚本文件,所以会直接执行,这样我们先前定义好的回调函数就可以被调用,从而实现了跨域请求的处理。这种方式只能用于 get 请求。

# 3. 什么是跨域?

  1. 浏览器有同源策略,不允许ajax访问其他域接口
  2. 跨域条件:协议、域名、端口,有一个不同就算跨域

# 3.1. 可以跨域的三个标签

img、link、script

# 3.2. 三个标签的使用场景

  1. <img>用于打点统计,统计网站可能是其他域;
  2. <link><script>可以使用CDN,CDN的也是其他域;
  3. <script>可以用于JSONP。