CORS クロスドメイン問題を解決する Django の方法

クロスドメインの問題の原因

Cross-Origin Resource Sharing(CORS)クロスドメインの問題は、selenium , playweight フロントエンドとバックエンドのプロジェクトや自動化されたテスト コードでよく発生します。python request, curl, postman ブラウザ以外のコードを使用してリクエストを送信する場合、この問題は発生しません。
これは、ブラウザーの同一生成元ポリシーにより、悪意のある可能性のあるファイルを隔離し、不正な攻撃から防御するために、ブラウザーは、同じソースからロードされたドキュメントやスクリプトが別のソースのリソースと対話することを制限しているためです。
を使用してAjax, Axiosリクエストを送信する場合、現在のホストのドメイン名およびポート番号がサービスプログラムのドメイン名ポート番号と一致していないと、クロスドメインエラーが発生し、レスポンスを受信できませんCORS。スクリプトはローカル ブラウザーで実行され、django サービスは http://localhost:8000 でも実行されますが、依然として CORS エラーが発生します。

Django サーバー側でCORS問題を解決するには 2 つの方法があります

解決策 1: カスタム ミドルウェアを使用してリクエスト ヘッダーを変更する

myproject/app/ ディレクトリに、新しい cors.py ファイルを作成します。

class CorsMiddleware(object):
    def process_response(self, req, resp):
        response["Access-Control-Allow-Origin"] = "*"
        return response

このクラスは、Access-Control-Allow-Origin:* パラメーターを各 django リクエストに追加するために使用されますが、ミドルウェア クラスのリストに追加する必要があります。最初に settings.py で、

MIDDLEWARE_CLASSES = (
    #...
    'app.CorsMiddleware' 
)

このカスタム ミドルウェア クラスを通じてさらにヘッダー パラメーターを追加することもできます。

解決策 2: django-cors-headers ライブラリを通じて実装する

これはサードパーティのライブラリ django-cors-headers ライブラリを通じて実現され、手順は次のとおりです。

1) インストール

pip install django-cors-headers

2) settings.py 構成ファイルを変更します。

アプリケーションリストに追加

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',
    ......

次に、次の構成を追加して、すべてのドメインへのアクセスを許可します。

CORS_ORIGIN_ALLOW_ALL = True

あるいは、特定のドメインのアクセスを許可します。

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

説明する

テスト環境では、CORS 問題を回避するためにすべてのドメインへのアクセスを許可できます。運用環境では、通常、フロントエンドとバックエンドの分離プロジェクトを同じドメインにデプロイする必要があります。クロスドメインが本当に必要な場合は、追加します。フロントエンドドメイン名をホワイトリスト
設定CORS_ORIGIN_WHITELIST項目に追加すると、他のドメインからのアクセスが禁止されます。

おすすめ

転載: blog.csdn.net/captain5339/article/details/131583701