前言

说起前后台对接，一定离不了跨域问题，而这也是面试中的考点之一，让我们看看什么是同源策略，又该如何解决跨域问题呢？

什么是同源策略

所谓同源策略，就是在本域的JavaScript不能操作其他域重点的页面对象以及数据，当协议名、主机名、端口号相同时
我们称之为同源，同源下的文件可以互相通信，让我们举例方便理解：

除此之外，当我们在 www.a.com 下通过<script src="www.b.com/b.js">，加载的b.js的域
也是www.a.com 而不是 www.b.com

前端跨域解决方案

1. JSONP

   我们知道<script>并不受同源策略影响，这就成为了我们的一个突破口，让我们想想该如何使用呢？
   假设我们在a.com/a.html中想获得b.com/jsonp中的数据，我们就会想，如果对面能够通过<script>将
   数据传过来就好了。其实这已经完成了一半了，我们的确可以获得数据了，但是有了数据，我们还不知道怎么用呀？
   所以我们需要设置一个回调函数了。比如我们在前端有一个函数：

   function JSONP(data){
       console.log(data);
       }
   

   后台返回的JS里面有以下代码:

      JSONP([1,2,3]);
   

   那么前端就可以在拿到数据同时执行回调处理数据了，但是还有一个问题，后台怎么知道前端回调函数的名字呢？
   很简单，我们前端请求时在query字段加上回调函数名称告诉后台就好啦，所以前端可以通过以下请求获得跨域
   数据：

       <script src="b.com/jsop?callback=JSONP">
   

   所以当我们需要跨域获取数据时，我们只需要动态添加一个跨域的<script>即可,如以下代码：

   functioni JSONP(data){
       console.log(data);
       }
       var script = document.createElement('script');
       script.src = "http://b.com/jsonp/?callback=JSONP";
       document.body.insertBefore(script,document.firstChild);
   

2. CORS
   CORS（Cross-Origin Resource Sharing，跨源资源共享）背后的思想使用自定义的HTTP头部让浏览器与服务器进行沟通，
   从而决定请求或相应是应该成功还是失败