APIを作成するためのフレームワーク「Django REST Framework (以後、DRF）」をインストール・設定します。
あわせて、APIには不可欠のCORS対策モジュールもインストール・設定します。
まずCORSの話から
なんで、CORS対策がAPIに不可欠なのか・・です。
CORS(Cross-Origin Resource Sharing)は、日本語でいえば「オリジン間リソース共有」対策って感じになります。
オリジン(Origin）とはHTMLを読み込むサーバのことだと考えれば良いので、簡単に言えば「異なるオリジン（Origin）間でリソースを共有できるようにする仕組み」ということです。
なぜ、そんなものが必要になるかと言うと、基本、ブラウザは今表示しようとしているHTMLをとってきたサーバー（オリジン）と、違うサーバー（オリジン）とでデータ共有しようとすると、それを拒否するように動くのがデフォルトだからです。
そして、それはセキュリティの確保のために、絶対必要な機能でもあります。
ちなみにオリジンが同一であるというのは。
です。
FQDNは「ホスト名＋ドメイン名」なので、例えば「www」と言うホスト名、「exsample.com」というドメイン名で、「www.exsample.com」がFQDNです。
で・・、プロトコルは「http」とかのこと。
ようするに「https://www.exsample.com:8000」まで一致すれば同じとみなすという風に理解しとけばいいと思います。
だから、クライアントサイドのJavaScriptから、別オリジンにあるWEB-APIを直接コールして、結果を得ようとしても、相手が「Access-Control-Allow-Origin」ヘダーを返すなどのCORS対策をしてくれていない限り拒否されることになります。
WebApiって、普通に使うとクロスオリジンになる場合がほとんどなので、その考慮をしていないと、使いづらいですよ・・というわけです。
今回は２回続きものとして書いてます
今回のゴールとして作ろうとしているのは、WebApiをコールして取得して結果を返すWebApi・・つまり、WebApiプロキシです。
それをDjangoとDRFを使って作り、Nuxt自己流チュートリアルで使えるようにします。
NUXT自己流チュートリアル（１）の中で、テスト専用Chromeショートカットを作ってくださいって書いて、（８）までは、それを使うこと前提で書いてました。
なぜかというと、そうしないと郵便番号から住所を取得するAPIを、JavaScriptから非同期でコールしてJSONを取得しようとすると拒否されて、NetworkErrorになってしまうからです。
今回、用意するのは、それを回避するためのWebApiプロキシです。
イメージ図としては、こんな感じ。
図の「Djangoサーバー」となってるところですね。
これを通すことで、郵便番号APIを使った住所取得が、普通のブラウザでも問題なくできるようにしようというわけなのです。
ということで、真ん中の「Node.jsサーバー・Nuxt.js」と書いている部分から左側（クライアント）に関しては、以下の一連の記事で書いている「自己流チュートリアル」の環境を想定してますので、興味のある方はどうぞ。
まずは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
実行すると、以下のようなプロジェクトフォルダができます。
プロジェクトフォルダに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にする方式があります。
今回は以下のような構成を考えてます。
そのため、クロスオリジンを許す必要があるURLをほぼ特定できるので、今回はWHITELISTにしてます。
WHITELISTにするときに注意が必要なことがあります。
「http://」または「https://」のプロトコルの指定が必ず必要なことです。
これがないと、runserverした時に以下のようなエラーがでます。
Origin '127.0.0.1:3000' in CORS_ORIGIN_WHITELIST is missing scheme or netloc
以前はそうでなかったのか、http://のついていないサンプルが多くネットにはあがってますし、情報も少なくて、意外とハマるので注意が必要です。
WebApiプロキシの作成とCORSの動作確認は次回にします。
今回は、インストールと設定するところまでです。
RESTフレームワークを使ってAPIを作って、JavaScriptからコールして動作確認とかするのは、長くなりすぎるので次回にします。
ではでは。