首頁 > 軟體

解決Django cors跨域問題

2022-06-23 18:01:45

Django cors跨域問題

前後端分離專案中的跨域問題 即同源策略

同源策略:同源策略/SOP(Same origin policy)是一種約定,由 Netscape 公司 1995 年引入瀏覽器,它是瀏覽器最核心也最基本的安全功能,現在所有支援 JavaScript 的瀏覽器都會使用這個策略。如果缺少了同源策略,瀏覽器很容易受到 XSS、 CSFR 等攻擊。

同源是指"協定+域名+埠"三者相同,即便兩個不同的域名指向同一個 ip 地址,也非同源。

源就是協定、域名和埠號。

協定:http,https

跨域:前端請求URL的協定、域名、埠與前端頁面URL不同就是跨域

在Django中解決跨域問題

一、

# 1、安裝第三方庫 django-cors-headers
# 2、在settings.py中新增'corsheaders.middleware.CorsMiddleware',在SessionMiddleware和CommonMiddleware的中間
# 3、在INSTALLED_APPS裡新增「corsheaders」
INSTALLED_APPS = [
    'search.apps.SearchConfig',
    'data.apps.DataConfig',
    'record_data.apps.RecordDataConfig',
    'deleted_data.apps.DeletedDataConfig',
    'mgmt.apps.MgmtConfig',
    'c_test.apps.CTestConfig',
    'rest_framework',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',  # 新增
]
# 4、在中介軟體中新增corsheaders.middleware.CorsMiddleware,django.middleware.common.CommonMiddleware
MIDDLEWARE = [
    # 'utils.middleware.ExceptionMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',  # 新增/必須在common中介軟體上面
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
# 5、在settings.py底部增加
CORS_ALLOW_CREDENTIALS = True  # 允許攜帶cookie
CORS_ORIGIN_ALLOW_ALL = True  # 放行所有
CORS_ORIGIN_WHITELIST = ('*')  # 白名單
# CORS_ALLOW_METHODS:字串列表,允許用哪些HTTP請求方法。
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)
# CORS_ALLOW_HEADERS:字串列表,允許使用哪些非標準HTTP請求頭。
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

二、

# 可以自己註冊一箇中介軟體,在中介軟體process_response方法中對response進行封裝
def process_response(self, request, response):
    response["Content-Type"] = "application/json"  # 響應資訊的內容格式
    response["Access-Control-Allow-Origin"] = "*"  # 允許跨域請求的源地址, * 表示:允許所有地址
    response["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS"  # 允許跨域請求的具體方法
    response["Access-Control-Max-Age"] = "1000"  # 用來指定本次預檢請求的有效期,單位為秒,,在此期間不用發出另一條預檢請求。
    response["Access-Control-Allow-Headers"] = "*"
    return response

跨域實現流程為

1、瀏覽器會第一次先傳送options請求詢問後端是否允許跨域,後端查詢白名單中是否有這兩個域名

2、如過域名在白名單中則在響應結果中告知瀏覽器允許跨域

3、瀏覽器第二次傳送post請求,攜帶使用者登入資料到後端,完成登入驗證操作

到此這篇關於Django cors跨域問題的文章就介紹到這了,更多相關Django cors跨域內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com