理解跨域

了解跨域前，先了解同源策略

同源策略

• 同源策略是浏览器的一种安全策略，所谓同源是指域名、协议、端口完全相同。若只有目录不同则仍是同源。
• 在同源策略下，只有同源的地址才可以相互通过Ajax的方式请求。
• 在同源策略下，浏览器不允许Ajax跨域获取服务器数据。
• 同源或者不同源说的是两个地址之间的关系，不同源地址之间请求称为——跨域。

跨域解决方案

• JSONP

  json with padding，是一种借助于script标签发送跨域请求的技巧。原理就是在客户端借助script标签请求服务器的一个地址。

  地址返回一段带有某个全局函数调用的JavaScript脚本。在调用函数中，原本需要返回给客户端的数据通过参数传递给这个函数。这样客户端的函数中就可以通过参数得到原本服务端想要返回的数据。

<input type="button" value="请求" class="btn">
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
   $(".btn").click(function(){
   //发送跨域请求
    $.ajax({
           url:"https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web",
           type:"get",
           dataType:"jsonp",
           jsonp:"cb",//这个属性是设置回调函数的参数名称（必须与后台接口的回调函数参数名保持一致）
          jsonpCallback:"jsp1",//JQ自动分配的回调函数的名称进行重命名
          data:{"wd":"ajax的跨域"},
          success:function(data){
               console.log(data);
           }
     })
 })
</script>
           

• JSONP只能发送GET请求，JSONP用的是script标签，与ajax提供的XMLHttpRequest没有任何关系。
• 在jquery中，使用$.ajax()时，将dataType设置为jsonp即可

CORS跨域

• 跨域资源共享，Cross Origin Resource。这种方案无需客户端做出任何变化，只是在被请求的服务端响应时添加一个Access=Control-Allow-Origin的响应头，表示这个资源是否允许指定域请求。

  Access-Control-Allow-Origin的值有：

      ① * （允许任意资源访问，不安全）；

      ② http://foo.com  (允许指定的源访问)

  服务端的演示：

<?php
  //通过设置响应头，允许其他的网站服务器跨域访问这个文件
     header("Access-Control-Allow-Origin:http://foo.example");
     header("Access-Control-Allow-Origin:*");
  >
           

关于跨域的示例代码：这里通过模仿百度搜索，调用百度的一个搜索接口实现跨域