Python Django 入門トップページ

« 戻る 次へ »

Django REST Framework による API 開発

  1. API とプロジェクトの概要
  2. Django REST Frameworkのインストール
  3. プロジェクトの作成
  4. 基本設定
  5. アプリケーションの作成と登録
  6. モデルの作成とマイグレーション
  7. テストデータの設定
  8. コメント一覧を出力する API
  9. コメント詳細情報を出力する API
  10. 新規投稿と更新・削除の API
  11. ページネーション
  12. 入力内容の検証（バリデーション）
  13. テストの自動化
  14. Shell でのユーザ登録
  15. Fixtures でのユーザ登録
  16. ユーザ認証を必須にする
  17. コメントにオーナ情報を追加
  18. 権限の設定：Case #1
  19. 権限の設定：Case #2
  20. Python から API への接続
  21. React アプリケーションからの API 接続と CORS エラーの回避

Django REST Framework による API 開発

React アプリケーションからの API 接続と CORS エラーの回避

まずは API について Web サーバを起動しておきます． 

...\django_comment_api>python manage.py runserver ⏎
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
November 28, 2023 - 13:10:12
Django version 4.2.7, using settings 'django_comment_api.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

目次に戻る

React アプリケーションから API に接続する（CORS エラー）

React アプリケーションの App.tsx から API に接続します．ここでは API から取得した結果をログに出力するだけの簡単なコードを記述しておきます． 

App.tsx
import React from 'react';
import { useEffect } from "react";
import './App.css';

function App() {
  useEffect(() => {
    fetch("http://127.0.0.1:8000/comments/")
      .then((res) => res.json())
      .then((json) => console.log(json.results))
      .catch(() => console.log("error"));
  }, []);

  return (
    <div>
      <h1>コメント一覧</h1>
    </div>
  );
}

export default App;

うまく接続できれば，Google Chrome の開発者ツールに取得できたコメントの内容が表示されるはずです．しかしながら，開発者ツールの「Console」にはオリジン間リソース共有 (CORS) に関する次のようなエラーが表示されます． 

Access to fetch at 'http://127.0.0.1:8000/comments/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
django-api-2023-28

目次に戻る

django-cors-headers のインストールと設定

上で発生した CORS エラーを回避するためには，Django アプリケーション側で若干の設定が必要になります．まず，pip コマンドを使って django-cors-headers をインストールします． 

...\django_comment_api>pip install django-cors-headers ⏎
Collecting django-cors-headers
  Obtaining dependency information for django-cors-headers from https://files.pythonhosted.org/packages/fe/6a/3428ab5d1ec270e845f4ef064a7cefbf1339b4454788d77c00d36caa828c/django_cors_headers-4.3.1-py3-none-any.whl.metadata
  Downloading django_cors_headers-4.3.1-py3-none-any.whl.metadata (16 kB)
...（中略）...
Installing collected packages: django-cors-headers
Successfully installed django-cors-headers-4.3.1
...\django_comment_api>

設定ファイルで corsheaders アプリケーションとミドルウェアを有効にし，許可するオリジンの設定も行います．なお，CORS_ALLOWED_ORIGINS には React アプリケーションの URI を設定してください． 

django_comment_api\settings.py（抜粋）
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'comments.apps.CommentsConfig',
    'rest_framework',
    'corsheaders',
]

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',
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

API 側でサーバを起動します． 

...\django_comment_api>python manage.py runserver ⏎

目次に戻る

React アプリケーションから API に接続する（成功）

React アプリケーションの App.tsx から API に接続します．今度は成功し，コメントの一覧を取得することができました．Google Chrome の開発者ツールで取得した結果を確認できます．

django-api-2023-29

目次に戻る

« 戻る 次へ »