產(chǎn)生跨域問題的原因

Cross-Origin Resource Sharing（CORS） 跨域問題，在前后端后離項(xiàng)目，selenium ， playweight 自動化測試代碼中經(jīng)常遇到。 而使用 python request, curl, postman 等非瀏覽器代碼發(fā)送請求時(shí)則不存在這個(gè)問題。

瀏覽器采用了同源保護(hù)策略，為了防御惡意攻擊，會檢查Request消息與Response消息的域名 Domain與端口 Port，如果不相同，則表示響應(yīng)消息與請求消息不是同源，可能是偽造的響應(yīng)消息，因此瀏覽器添加了CORS限制功能，默認(rèn)不接受非同源的響應(yīng)消息。

瀏覽器與服務(wù)器都運(yùn)行在同一臺電腦上為何仍出現(xiàn)跨域問題？

原因: Ajax腳本在本機(jī)瀏覽器運(yùn)行時(shí), 默認(rèn)主機(jī)地址為http://127.0.0.1:8848，而開發(fā)環(huán)境 django服務(wù)默認(rèn)地址為：http://localhost:8000 上，因此，瀏覽器與服務(wù)器雖然主機(jī)名相同，但端口不同，所以不符合CORS要求，故瀏覽器仍然會出現(xiàn)CORS錯(cuò)誤。

解決思路

如何解決這種情形的問題呢？

瀏覽器同源策略有條規(guī)則，Response頭部如果包含如下字段值，則不做CORS檢查。

Access-Control-Allow-Origin: *

接下來就是如何添加這個(gè)參數(shù)。 方法通常有2種：
(1) 方法1: 在使用前端代理在response中添加Access-Control-Allow-Origin:頭部參數(shù);
(2) 方法2：在服務(wù)器端，給response添加Access-Control-Allow-Origin頭部參數(shù)。

方法1，實(shí)施還是比較麻煩，前端還要安裝node.js的服務(wù)代理程序才能實(shí)現(xiàn)。而方法2，如果服務(wù)器使用django，則實(shí)現(xiàn)很容易。即通過中間件middleware 對所有response添加、修改頭部參數(shù)。

解決方法1： 通過自定義中間件修改Response頭部

在myproject/myapp/ 目錄下，新建1個(gè) middlewares.py 文件

class CorsMiddleware(object):
    """中間件：跨域訪問"""
    def __init__(self, get_response):
        self.get_response = get_response
    
    def __call__(self, request):
        return self.get_response(request)
    
    # process_template_response(), process_response() 只能二選一、根據(jù)view的response類型，重載相應(yīng)方法。 
    def process_template_response(self,request,response):
        # 如果view 使用了render渲染response，使用這個(gè)中間件
        response["Access-Control-Allow-Origin"] = "*"
        return response
        
    def process_response(self,request,response):
        # 如果view使用HttpResponse, 將使用這個(gè)中間件
        response["Access-Control-Allow-Origin"] = "*"
        return response

這個(gè)類的方法 process_template_response(), process_response()，用于為每個(gè)django response添加1個(gè)Access-Control-Allow-Origin: * 頭部參數(shù), 兩個(gè)方法使用1個(gè)就可以。 當(dāng)然也可以利用這個(gè)中間件添加、修改其它頭部參數(shù)。

將新定義的中間件 CorsMiddleware 添加到 settings.py 的 middleware classes:的列表，如 Ajax使用的主機(jī)+端口號，如：http://127.0.0.1:8848

MIDDLEWARE = [
    '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',
    'myapp.middlewares.CorsMiddleware',  # 允許跨域訪問中間件
]

再次發(fā)送Ajax請求，可以成功接收到django的響應(yīng)數(shù)據(jù)。使用瀏覽器DevTools檢查Response響應(yīng)頭部參數(shù),可以看到已經(jīng)添加了Access-Control-Allow-Origin: *

HTTP/1.1 200 OK
Date: Sat, 21 Aug 2023 08:26:17 GMT
Server: WSGIServer/0.2 CPython/3.11.4
Content-Type: text/html; charset=utf-8
Access-Control-Allow-Origin: *
X-Frame-Options: DENY
Content-Length: 5177
Vary: Cookie
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin

說明： 此方法雖然簡單易行，Access-Control-Allow-Origin 設(shè)置為*, 允許任何跨域訪問，顯然不太安全，每次修改須更新代碼，因此僅適用于開發(fā)測試環(huán)境。

解決方法2： 通過 django-cors-headers 庫來實(shí)現(xiàn)

生產(chǎn)環(huán)境下，建議通過第3方庫django-cors-headers 來實(shí)現(xiàn)，其步驟如下

1） 安裝

pip install django-cors-headers

2） 修改 settings.py 配置文件

添加到應(yīng)用列表

INSTALLED_APPS = (
    ##...
    'corsheaders'
)

添加中間件列表 corsheaders.middleware.CorsMiddleware

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    ......

然后，添加下面配置 允許所有 domain 訪問

CORS_ORIGIN_ALLOW_ALL = True

或者，允許某些域訪問

CORS_ORIGIN_ALLOW_ALL = False
# 允許域名加入白名單
CORS_ORIGIN_WHITELIST = (
    'http//:localhost:8000',
)

說明

在測試環(huán)境中，可以允許所有domain來訪問，以避免 CORS問題，前后端分離項(xiàng)目在生產(chǎn)環(huán)境下，通常應(yīng)該部署在同域下，如果確實(shí)需要跨域，則將前端域名添加到白名單 CORS_ORIGIN_WHITELIST配置項(xiàng)中，禁止其它域訪問。

最后

以上就是Django解決CORS跨域問題的方案的詳細(xì)內(nèi)容，更多關(guān)于Django解決CORS跨域的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論