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

跨域是指從一個域名的網頁去請求另一個域名的資源，即請求不同源的資源。

同源的三個條件：

網絡協議、端口、域名（子域名）全部相同，三者缺一不可。
有任何一個不同，則涉及到跨域，詳見表格：

目前比較主流的解決方案有兩種，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 ){
    // 處理跨域請求得到的數據
});