跨域请求？两种解决方案CORS与JSONP

什么是同源？什么是跨域？

跨域是指从一个域名的网页去请求另一个域名的资源，即请求不同源的资源。

同源的三个条件：

网络协议、端口、域名（子域名）全部相同，三者缺一不可。
有任何一个不同，则涉及到跨域，详见表格：

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名	不允许

---

目前比较主流的解决方案有两种，CORS与JSONP。

CORS(corss origin resource share) 兼容度低

跟前端没有任何关系在服务器端设置“允许跨域访问”即可。

注意：

HTML5语法，前提条件是浏览器需要支持这个header（IE10及以下的浏览器不支持）

支持所有的跨域访问，但存在安全风险

<?php
header('Access-Control-Allow-Origin: *');
?>

只支持该域名访问（定向）

header('Access-Control-Allow-Origin: http://a.com');

---

JSONP 兼容度高

原理：

dom元素的src属性可以跨域获取资源，而且这种方案不受浏览器的限制。
传递的数据为JSON格式，p可以理解为package，将数据打包进JSON。
不需要后台特殊处理。

注意：

1. 有src属性的标签有：<img>、<script>
2. JSONP只能用于发起GET请求，无法发起JSONP的POST请求

JSONP的原生JS语法

将“访问链接？callback=函数名”写入内容为空的script标签的src中。

<script>    //函数即对所请求回来的数据进行的处理方法
  function doSomething(backData){
          console.log(backData);
  }
</script>
<script src="http://192.168.19.68/2018-1-5/05.JSONP/api/backData.php?callback=doSomething"></script>

jQuery请求JSONP

<script src="./js/jquery-1.12.4.min.js"></script>
<script>
    $(function(){
        $('h2').click(function(){
            $.get({
            //请求地址
                url:"http://192.168.19.68/2018-1-5/05.JSONP/api/backData.php",
                success:function(backData){
                    console.log(backData);   //函数即对所请求回来的数据进行的处理方法
                },
                dataType:'jsonp'  // 人为的告诉jQ这是JSONP的接口
            })
        })
    })
</script>

jQuery封装好的JSONP方法

$.getJSON( "http://b.a.com/bar?callback=callback", function( data ){
    // 处理跨域请求得到的数据
});