"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

Django REST Framework (DRF)のインストール・設定とCORS対策をする/python・django

APIを作成するためのフレームワークDjango REST Framework (以後、DRF)」をインストール・設定します。

あわせて、APIには不可欠のCORS対策モジュールもインストール・設定します。

f:id:arakan_no_boku:20190607195913j:plain

 

まずCORSの話から

 

なんで、CORS対策がAPIに不可欠なのか・・です。

CORS(Cross-Origin Resource Sharing)は、日本語でいえば「オリジン間リソース共有」対策って感じになります。

オリジン(Origin)とはHTMLを読み込むサーバのことだと考えれば良いので、簡単に言えば「異なるオリジン(Origin)間でリソースを共有できるようにする仕組み」ということです。

なぜ、そんなものが必要になるかと言うと、基本、ブラウザは今表示しようとしているHTMLをとってきたサーバー(オリジン)と、違うサーバー(オリジン)とでデータ共有しようとすると、それを拒否するように動くのがデフォルトだからです。

そして、それはセキュリティの確保のために、絶対必要な機能でもあります。

ちなみにオリジンが同一であるというのは。

  • URLのFQDNが一致している
  • スキーム(プロトコル)が一致している
  • ポート番号が一致している

です。

FQDNは「ホスト名+ドメイン名」なので、例えば「www」と言うホスト名、「exsample.com」というドメイン名で、「www.exsample.com」がFQDNです。

で・・、プロトコルは「http」とかのこと。

ようするに「https://www.exsample.com:8000」まで一致すれば同じとみなすという風に理解しとけばいいと思います。 

だから、クライアントサイドのJavaScriptから、別オリジンにあるWEB-APIを直接コールして、結果を得ようとしても、相手が「Access-Control-Allow-Origin」ヘダーを返すなどのCORS対策をしてくれていない限り拒否されることになります。

WebApiって、普通に使うとクロスオリジンになる場合がほとんどなので、その考慮をしていないと、使いづらいですよ・・というわけです。

 

今回は2回続きものとして書いてます

 

今回のゴールとして作ろうとしているのは、WebApiをコールして取得して結果を返すWebApi・・つまり、WebApiプロキシです。

それをDjangoDRFを使って作り、Nuxt自己流チュートリアルで使えるようにします。

NUXT自己流チュートリアル(1)の中で、テスト専用Chromeショートカットを作ってくださいって書いて、(8)までは、それを使うこと前提で書いてました。

arakan-pgm-ai.hatenablog.com

なぜかというと、そうしないと郵便番号から住所を取得するAPIを、JavaScriptから非同期でコールしてJSONを取得しようとすると拒否されて、NetworkErrorになってしまうからです。

今回、用意するのは、それを回避するためのWebApiプロキシです。

イメージ図としては、こんな感じ。

図の「Djangoサーバー」となってるところですね。

f:id:arakan_no_boku:20190615135535p:plain

これを通すことで、郵便番号APIを使った住所取得が、普通のブラウザでも問題なくできるようにしようというわけなのです。

ということで、真ん中の「Node.jsサーバー・Nuxt.js」と書いている部分から左側(クライアント)に関しては、以下の一連の記事で書いている「自己流チュートリアル」の環境を想定してますので、興味のある方はどうぞ。

arakan-pgm-ai.hatenablog.com

 

まずはDjangoとDjangoRESTフレームワークをインストール

 

前提として。

Windows10で、Anacondaがインストールされている環境をベースに説明します。
condaで仮想環境(自分は restapi という名前でつくってみました)を作るか、既存の仮想環境をActiveにします。

インストール自体は以下のコマンド一発です。

Djangoの本体とか、既にインストール済のものがあれば、とばしてください。

まず、Django本体

pip install django

CORS対策モジュール

pip install django-cors-headers

RESTフレームワーク

pip install djangorestframework 

あと、WebApiを処理するのに「requests」も使うので、はいってない場合はインストールしておきます。

pip install requests

インストールしたら、作業フォルダを適当なところに用意します。

今回はとりあえず「C:\01demos\04_rest」にしてみました。

このフォルダをカレントフォルダにして、以下を実行します。

プロジェクトの名前もとりあえず「rest」にしておきます。

django-admin startproject rest

実行すると、以下のようなプロジェクトフォルダができます。 

f:id:arakan_no_boku:20190607222350p:plain

プロジェクトフォルダにsettings.pyにCORSとRESTframeworkを有効にするための設定を追加します。

今回の例だと、rest/rest/settings.pyになります。

以下の設定を追加します。

INSTALLED_APPS = [
    'rest_framework',
    'corsheaders',
]

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny'
    ]
}

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
]

#CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
'http://localhost:3000',
'http://127.0.0.1:3000',
)

CORS対策を有効にする方法には、WHITELIST方式と、CORS_ORIGIN_ALLOW_ALL =Trueにする方式があります。

今回は以下のような構成を考えてます。

f:id:arakan_no_boku:20190615133402p:plain

そのため、クロスオリジンを許す必要があるURLをほぼ特定できるので、今回はWHITELISTにしてます。

WHITELISTにするときに注意が必要なことがあります。

「http://」または「https://」のプロトコルの指定が必ず必要なことです。

これがないと、runserverした時に以下のようなエラーがでます。

Origin '127.0.0.1:3000' in CORS_ORIGIN_WHITELIST is missing scheme or netloc

以前はそうでなかったのか、http://のついていないサンプルが多くネットにはあがってますし、情報も少なくて、意外とハマるので注意が必要です。

github.com 

 

WebApiプロキシの作成とCORSの動作確認は次回にします。 

 

今回は、インストールと設定するところまでです。

RESTフレームワークを使ってAPIを作って、JavaScriptからコールして動作確認とかするのは、長くなりすぎるので次回にします。

ではでは。