CORSエラーを解決するためにやること(Djangoメイン)

毎回詰まってるのでまとめておく。

サーバーサイドの設定

Access-Control-Allow-Origin
を設定するようにする。

Djangoの場合

django==2.2.10
djangorestframework==3.11.0

django-cors-headersをインストールする。

pip install django-cors-headers
ないし
yarn add django-cors-headers

INSTALLED_APPSに
corsheaders
を追加する。

以下、Pythonのコードはすべてsettings.py等、設定用のpythonファイルに書く。

INSTALLED_APPS = [
...
...
    'corsheaders',
]

MIDDLEWAREに
corsheaders.middleware.CorsMiddleware
を追加する。

この行はCommonMiddlewareよりも上部になければならない。
(上すぎても駄目だったので直上あたりに)

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

ホワイトリストの設定。

CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',
]

ここは、V3.0前と以降で書き方が変わってるので注意。
(http:// や https:// 等schemes部分を省略するかしないか)

https://github.com/adamchainz/django-cors-headers/blob/master/HISTORY.rst

フロントの設定

APIにCookieを渡したいときは、withCredentials=trueをセットする。

以下はDjango REST frameworkの場合。
CSRFトークンを渡したいときは、js-cookieをインストールして、クッキーからcsrftokenを取得。
APIをコールするときのリクエストヘッダーに渡す。

以下はaxiosを使う場合。

import Cookies from 'js-cookie';
import axios from 'axios';

axios.defaults.withCredentials = true;

export const GetDefaultHeader = () => {
    const csrfToken = Cookies.get('csrftoken');
    return {
        headers: {
            'X-CSRFToken': csrfToken
        }
    };
};

Cookies.getで値が取れない場合

cookieの設定の可能性がある。
ChromeのDevToolsを見る。
paint.png

CookieにHttpOnlyが設定されている場合は、JSで値が取得できない。
サーバーサイドで作っているCookieの設定を確認すること。

以下はDjangoの場合。

CSRF_COOKIE_HTTPONLY = False

設定変更後は再ログインしてCookieを作り直すこと。

ツイッターでシェア
みんなに共有、忘れないようにメモ

iotas𓆡創作支援アプリ運営中𓅬

創作支援ツールとかを作ってます。(Python) https://www.world-type.com 歴史成分多め。

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

コメント