DjangoのwebサーバからapiサーバーにajaxでPOSTしたら『Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’』とかなった場合のメモ

(Django1.11.11 + django rest framework3.6.1, jquery-3.2.1)

ajaxでPOSTした時のエラー

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、%1$S にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が ‘*’ である場合、認証情報はサポートされない)。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘%1$S’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).

cros

データのアクセスを許可できるWebサイトに対してはOriginを越えたアクセスを可能にするための仕組み

CORSまとめ - Qiita

参考

[CORS (Cross-Origin Resource Sharing) ってなに？] (https://aloerina01.github.io/blog/2016-10-13-1)
CORSリクエストでクレデンシャル(≒クッキー)を必要とする場合の注意点 - Qiita
[オリジン間リソース共有 (CORS)]
CORS を分かってないから動くコード書いて理解する - Qiita

Django + django rest framework での解決策

Access-Control-Allow-Origin と Access-Control-Allow-Credentials が必要っぽい
django-cors-headers を使えばいいっぽい

参考

Setup

$ pip install django-cors-headers

settings.py

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

ajaxでPOSTして200なのにfailになる場合

ひさびさに jQuery の $.ajax 使った...
withCredentials 足りてなかった
data: data ではなく data: JSON.stringify(data) にした
dataType: 'JSON' ではなく contentType: 'application/json' を記述してみた

記述例

    var url = 'https://hoge.com/fuga/';
    var data = {
      hoge: 'hoge!!1',
    };
    $.ajax({
      url: url,
      type:'POST',
      xhrFields: {
        withCredentials: true
      },
      contentType: 'application/json',
      data:JSON.stringify(data)
    }).done(function(){
      console.error('done!!1');
    }).fail(function(data){
      console.error('fail!!1');
    });
  };