07. django-cors-header

第 12 屆 iThome 鐵人賽

DAY 7

Modern Web

加速你的 Django 網站開發 - Django 的好用套件系列第 7 篇

12th鐵人賽 django

elleryq

2020-09-07 13:59:34

8002 瀏覽

分享至

CORS 是一個 W3C 標準，全名是 Cross-Origin Resource Sharing，跨網域資源共享。

AJAX 受到瀏覽器限制，只允許在同一個網域使用，而 CORS 則允許瀏覽器可以對不同的網域發出 XMLHttpRequest (AJAX) 請求。所以，CORS 需要瀏覽器跟網站相互配合才可以，目前來說，瀏覽器都已經支援了 CORS，所以只需要更動網站，讓網站支援就可以了。

那網站這邊要改什麼呢？只有一個，就是輸出的 HTTP 表頭要正確。CORS 詳細的原理可以閱讀下方的參考資料，這幾篇從瀏覽器端送出的 HTTP Header 到網站回應所該送出的 HTTP header ，以及限制、陷阱都講解的很清楚，這裡就不多做著墨了。

Django 只要安裝 django-cors-header 就可以了。

專案網址：https://github.com/adamchainz/django-cors-headers

安裝

poetry add django-cors-header

設定

# settings
INSTALLED_APPS = [
    # ...
    'corsheaders',
    # ...
]

MIDDLEWARE = [
    # ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ...
]

使用

一樣也是在設定 (settings) 裡填寫，有三個變數可以填

CORS_ALLOWED_ORIGIN
CORS_ALLOWED_ORIGIN_REGEXES
CORS_ALLOW_ALL_ORIGINS

這三個只要挑一個來寫就可以。

CORS_ALLOW_ALL_ORIGINS 要填 True 或 False，預設是 False；當填 True 時，表示允許任何請求來呼叫，這是相當危險的。

CORS_ALLOWED_ORIGIN 要填網域列表，例如：

CORS_ALLOWED_ORIGINS = [
    "https://example.com",
    "https://sub.example.com",
    "http://localhost:8080",
    "http://127.0.0.1:9000"
]

表示只允許這些網域來的請求可以使用網站資源。

CORS_ALLOWED_ORIGIN_REGEXES 也是填網域的列表，但是網域的名稱可以用 regular expression 來表示，例如

CORS_ALLOWED_ORIGIN_REGEXES = [
    r"^https://\w+\.example\.com$",
]

我自己只有用到 CORS_ALLOWED_ORIGINS，這次為了鐵人賽，才知道還有這麼多可以設定：CORS_URLS_REGEX, CORS_ALLOW_METHODS, CORS_ALLOW_HEADER, CORS_EXPOSE_HEADERS, CORS_PREFLIGHT_MAX_AGE, CORS_ALLOW_CREDENTIALS, CSRF_TRUSTED_ORIGINS, CORS_REPLACE_HTTPS_REFERER，未來要做更細部的設定的時候，再來研讀。