如何解决跨域问题

什么是跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

什么是同源策略？

• 同源定义
  源=协议+域名+端口号（window.origin或location.origin可以得到当前源）
  同源：如果两个url的协议、域名、端口号完全一致，那么这两个url就是同源的。
  例如：

https://qq.com
https://www.qq.com

这两者就不是同源的，完全一致的才算同源。

• 同源策略（不同源的页面之间，不准互相访问数据）
  浏览器规定如果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的数据。

• 这么做的目的是什么？
  为了保护用户隐私。

怎么跨域？

• 问题根源
  1、浏览器默认不同源之间不能互相访问数据
  2、但是qq.com和frank.com其实都是自己的网站
  3、我想让两个网站互相访问，浏览器为什么要组织

解法一 用CORS

如果要共享数据，需要提前声明，如何声明呢？
具体语法

Access-Control-Allow-Origin:(允许访问的网址)

详情参考：(https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)

解法二 JSONP

（主要是用来兼容IE的）
客户端在 HTML 中动态生成 script 标签，在 “src” 中引入请求的 URL + 回调函数，这样请求服务器返回的数据会交由回调函数处理，这样就实现了跨域读请求；服务端在接收到客户端请求后，首先取得客户端要回调的函数名，再生成 JavaScript 代码段返回给浏览器，浏览器在获取到返回结果后直接调用回调函数完成任务。

• 例如frank.com访问qq.com
  1、qq.com将数据写到/frank.js
  2、frank.com用script标签引用/frank.js
  3、/frank.js执行，执行什么呢？
  4、frank.com事先定义好window.xxx函数
  5、/frank.js执行window.xxx({frinds:[....]})
  6、然后frank.com就通过window.xxx获取到数据了
  （window.xxx就是一个回调）

扩展

为什么可以跨域使用CSS、JS和图片等？
同源策略限制的是数据访问，我们引用CSS、JS和图片的时候，其实并不知道其内容，我们只是在引用。（如果可以跨域使用的话那你知道CSS的第一个字符是什么吗？）