一個源的定義

如果兩個頁面的協議，埠（如果有指定）和域名都相同，則兩個頁面具有相同的源。

舉個例子：

下表給出了相對http://a.xyz.com/dir/page.html同源檢測的示例: 

同源策略

同源策略是瀏覽器的一個安全功能，不同源的客戶端指令碼在沒有明確授權的情況下，不能讀寫對方資源。所以xyz.com下的js指令碼採用ajax讀取abc.com裡面的檔案資料是會被拒絕的。

同源策略限制了從同一個源載入的文件或指令碼如何與來自另一個源的資源進行互動。這是一個用於隔離潛在惡意檔案的重要安全機制。

不受同源策略限制的

1. 頁面中的連結，重定向以及表單提交是不會受到同源策略限制的。

2. 跨域資源的引入是可以的。但是js不能讀寫載入的內容。如嵌入到頁面中的<script src="..."></script>，<img>，<link>，<iframe>等。

CORS解決跨域問題

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。它允許瀏覽器向跨源伺服器發出XMLHttpRequest請求，從而解決AJAX只能同源使用的限制。

CORS簡介

CORS需要瀏覽器和伺服器同時支援。目前基本上主流的瀏覽器都支援CORS。所以只要後端服務支援CORS，就能夠實現跨域。

簡單請求和非簡單請求介紹

瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。

一個請求需要同時滿足以下兩大條件才屬於簡單請求。

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

使用django-cors-headers解決目前的CORS跨域問題

我們只需要安裝這個包，然後按需要配置一下就可以了。

安裝

註冊APP

    ...
    'app01.apps.App01Config',
    'corsheaders',  # 將 corsheaders 這個APP註冊
]

新增中介軟體

必須放在最前面，因為要先解決跨域的問題。只有允許跨域請求，後續的中介軟體才會正常執行。

MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # 新增中介軟體
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

配置

你可以選擇不限制跨域訪問

或者你可以選擇設定允許訪問的白名單

CORS_ORIGIN_WHITELIST = (
    # '<YOUR_DOMAIN>[:PORT]',
    '127.0.0.1:8080'
)

更多詳細配置詳細請檢視django-cors-headers專案