CORS跨域和同源政策

1. 同源政策

   1. 先來說說什麼是源

      • 源（origin）就是協定、域名和端口号。

      以上url中的源就是：http://www.company.com:80

      若位址裡面的協定、域名和端口号均相同則屬于同源。

      以下是相對于 http://www.a.com/test/index.html 的同源檢測

      • http://www.a.com/dir/page.html ----成功

      • http://www.child.a.com/test/index.html ----失敗，域名不同

      • https://www.a.com/test/index.html ----失敗，協定不同

      • http://www.a.com:8080/test/index.html ----失敗，端口号不同

      2.什麼是同源政策？

      同源政策是浏覽器的一個安全功能，不同源的用戶端腳本在沒有明确授權的情況下，不能讀寫對方資源。是以a.com下的js腳本采用ajax讀取b.com裡面的檔案資料是會報錯的。

2. CORS跨域

   1. CORS跨域請求錯誤

      

   2. 跨域請求

      當浏覽器發起請求時，如果

      源請求頁面位址

      和

      被請求位址

      不是同源位址，那麼這個請求就是跨域請求。

   3. CORS跨域請求限制

      浏覽器在發起ajax跨域請求時，預設會有CORS跨域請求限制。

      浏覽器在請求頭中攜帶Origin請求頭，表明源請求位址：

      Origin: 源請求位址
                 

      伺服器在傳回響應時，如果允許源位址對其進行跨域請求，需要在響應頭中攜帶Access-Control-Allow-Origin響應頭：

      Access-Control-Allow-Origin: 源請求位址
                 

      浏覽器在收到響應時，如果發現響應頭中沒有Access-Control-Allow-Origin響應頭，浏覽器會直接将請求駁回，産生CORS跨域請求限制。

   4. CORS跨域請求設定

      項目中前端伺服器與後端伺服器分處不同的域名，需要為後端伺服器添加跨域通路的支援。

      Django項目中可以使用django-cors-headers擴充進行跨域請求設定。

      1. 安裝

         pip install django-cors-headers
                    

      2. 注冊

         INSTALLED_APPS = (
             ...
             'corsheaders',
             ...
         )
                    

      3. 注冊中間件

         MIDDLEWARE = [
             # 注意：此中間件添加到中間件的第一個
             'corsheaders.middleware.CorsMiddleware',
             ...
         ]
                    

      4. 添加跨域請求白名單

         # CORS跨域請求設定
         CORS_ORIGIN_WHITELIST = (
             # 備注：允許源位址`http://127.0.0.1:8080`向目前API伺服器發起跨域請求
             'http://127.0.0.1:8080',
         )
         # 允許攜帶cookie
         CORS_ALLOW_CREDENTIALS = True 
         # 允許所有源通路
         # 如果不需要允許全部，可以設定CORS_ORIGIN_WHITELIST=（）參數，将需要通路的域名添加即可
         # CORS_ORIGIN_ALLOW_ALL = True
                    

         • 凡是出現在白名單中的域名，都可以通路後端接口
         • CORS_ALLOW_CREDENTIALS 指明在跨域通路中，後端是否支援對cookie的操作。
      總結：
      • django-cors-headers擴充參考文檔：CORS擴充參考文檔
      • 同源位址：協定、域名和端口完整相同的位址為同源位址
      • 跨域請求：用戶端發起請求時，如果源請求位址和被請求位址不同源，則請求就是跨域請求
      • CORS跨域請求限制：浏覽器針對ajax異步請求，會有CORS跨域請求限制
        • Origin
        • Access-Control-Allow-Origin

      • CORS請求擴充包

        設定跨域請求白名單