同源 不同源 及跨域的簡單梳理

1、什麼是同源？不同源？

下面的這三個内容一樣 我們稱之為同源

            ip位址:192.168.13.75  （示例）

            端口:80 （示例）

            協定:http: 

        兩個同源的頁面 是可以互相發送請求的 沒有任何的限制

反之，

 ip,端口,協定有任何 一個不一樣 就是不同源

            不同源的頁面之間 不能直接發送請求

            浏覽器會提示 錯誤

2、不同源的頁面該如何互相通路——‘跨域’

3、常見的兩種跨域方案：

 a.    CORS: cross origin resource share

                    伺服器端 設定一個允許的header 我們就可以跨域通路

                    header('Access-Control-Allow-Origin: *');

                    注意點

                        1.這項技術是h5中推出的,有相容性問題,隻有支援html5的浏覽器才可以使用

                        2.php中設定的文法是header('Access-Control-Allow-Origin: *'); 其他語言的文法 類似的 設定的内容是一樣的 都是允許通路

  b.   JSONP: 

                    目前相容性 很好的 跨域方案

4、 關于跨域方案

            預設是無法跨域的,

            但是實際開發中 不可避免的會碰到類似這樣的情況，比如 調用别人的api (圖靈機器人,天氣預報,豆瓣)

5、對于JSONP的解釋：

 a、html元素的 src屬性 天然就支援 跨域通路

     JSONP 就是利用了script的 src 支援跨域通路  

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
           

b、 JSONP這項技術 出來之後 廣大的程式員就做了一個約定,統一使用callback作為key

<script src="http://192.168.13.75/2018-5-12/08.JSONP/backData.php?callback=doSomething"></script>
           

c、JSONP的限制

隻能發送get請求，CORS get和post都可以，資料量有限制，私密資訊會有安全性問題