瀏覽器的同源策略及CORS跨域解決方案 DRF

一個源的定義

若是兩個頁面的協議，端口（若是有指定）和域名都相同，則兩個頁面具備相同的源。

舉個例子：

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

URL	結果	緣由
http://a.xyz.com/dir2/other.html	成功
http://a.xyz.com/dir/inner/another.html	成功
https://a.xyz.com/secure.html	失敗	不一樣協議 ( https和http )
http://a.xyz.com:81/dir/etc.html	失敗	不一樣端口 ( 81和80)
http://a.opq.com/dir/other.html	失敗	不一樣域名 ( xyz和opq)

同源策略

同源策略是瀏覽器的一個安全功能，不一樣源的客戶端腳本在沒有明確受權的狀況下，不能讀寫對方資源。因此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跨域問題

咱們只須要安裝這個包，而後按須要配置一下就能夠了。

安裝

 pip install django-cors-headers

註冊APP

 INSTALLED_APPS = [

    ...
    '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_ALLOW_ALL = True

或者你能夠選擇設置容許訪問的白名單

  CORS_ORIGIN_ALLOW_ALL = False

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

更多詳細配置詳細請查看django-cors-headers項目