跨域請求？兩種解決方案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 ){
    // 處理跨域請求得到的資料
});