django 跨域

什麼是跨域

跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這裏跨域是廣義的。
其實我們通常所說的跨域是狹義的，是由瀏覽器同源策略限制的一類請求場景。

什麼是同源策略？

同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等***。所謂同源是指"協議+域名+端口"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。

同源策略限制以下幾種行爲：

• Cookie、LocalStorage 和 IndexDB 無法讀取
• DOM 和 Js對象無法獲得
• AJAX 請求不能發送

CORS基本流程

瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。
瀏覽器發出CORS簡單請求，只需要在頭信息之中增加一個Origin字段。
瀏覽器發出CORS非簡單請求，會在正式通信之前，增加一次HTTP查詢請求，稱爲"預檢"請求（preflight）。瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及可以使用哪些HTTP動詞和頭信息字段。只有得到肯定答覆，瀏覽器纔會發出正式的XMLHttpRequest請求，否則就報錯。

CORS兩種請求詳解

只要同時滿足以下兩大條件，就屬於簡單請求。

（1) 請求方法是以下三種方法之一：
HEAD
GET
POST
（2）HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同時滿足上面兩個條件，就屬於非簡單請求。

瀏覽器對這兩種請求的處理，是不一樣的。

* 簡單請求和非簡單請求的區別？

   簡單請求：一次請求
   非簡單請求：兩次請求，在發送數據之前會先發一次請求用於做“預檢”，只有“預檢”通過後纔再發送一次請求用於數據傳輸。
* 關於“預檢”

- 請求方式：OPTIONS
- “預檢”其實做檢查，檢查如果通過則允許傳輸數據，檢查不通過則不再發送真正想要發送的消息
- 如何“預檢”
     => 如果複雜請求是PUT等請求，則服務端需要設置允許某請求，否則“預檢”不通過
        Access-Control-Request-Method
     => 如果複雜請求設置了請求頭，則服務端需要設置允許某請求頭，否則“預檢”不通過
        Access-Control-Request-Headers

支持跨域，簡單請求
            服務器設置響應頭：Access-Control-Allow-Origin = '域名' 或 '*'

支持跨域，複雜請求

由於複雜請求時，首先會發送“預檢”請求，如果“預檢”成功，則發送真實數據。

“預檢”請求時，允許請求方式則需服務器設置響應頭：Access-Control-Request-Method
“預檢”請求時，允許請求頭則需服務器設置響應頭：Access-Control-Request-Headers

幾種方法

• 使用django-cors-headers全局控制
• 使用JsonP，只能用於Get方法
• 在views.py裏設置響應頭，只能控制單個接口

django-cors-headers

首先安裝
pip install django-cors-headers

然後在settings.py裏配置一番就可以

INSTALLED_APPS = [
    ...
    'corsheaders'，
    ...
 ] 

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware', # 注意順序
    ...
)
#跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    '*'
)

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)

無需考慮PUT,DELETE,PATCH方法的支持,cors默認都支持.
若使用更多複雜配置導致無法訪問或各種報錯,打開谷歌瀏覽器調試窗口,針對具體報錯逐一解決.

location / {
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

        if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET,POST,PUT,DELETE,PATCH,OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Sample-Source';
                return 200;
        }
        proxy_pass http://127.0.0.1:8080;
  }

JsonP

使用Ajax獲取json數據時，存在跨域的限制。不過，在Web頁面上調用js的script腳本文件時卻不受跨域的影響，JSONP就是利用這個來實現跨域的傳輸。因此，我們需要將Ajax調用中的dataType從JSON改爲JSONP（相應的API也需要支持JSONP）格式。
JSONP只能用於GET請求。