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を見る。

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

以下はDjangoの場合。

CSRF_COOKIE_HTTPONLY = False

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