Djangoで作った認証が必要なAPIをwebpack-dev-serverで使う方法

ローカル開発でDjangoのdevelopサーバーを立てて、webpack-dev-serverで立ち上げたSPAアプリケーションからAPIを叩きたい。

こんな状況でしたがDjangoがlocalhost:8000でwebpack-dev-serverがlocalhost:3000なのでクッキーを保存できずに困った。

 

スポンサーリンク

やりたいこと

localhost:3000からログインとその他の認証後のAPIを叩きたい。

認証の仕組みは通常通りにCookieを利用する。

 

問題点:localhost:3000で叩いてもDjango側がlocalhost:8000なのでcookieがlocalhost:3000に保存されない。

 

スポンサーリンク

解決策:クロスドメインでもリクエスト側にcookieをセットできる設定をする

Django

pip install django-cors-headers

これをインストールheader情報を簡単に設定できます。

 

settiing.pyに以下を書く

# これが大事
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_METHODS = ('*')
# ホワイトリスト設定
CORS_ORIGIN_WHITELIST = (
  'localhost:3000',
  'localhost:8000',
)

 

APIクライアント

axiosを使っていた場合

axios({
  method: 'post',
  url: 'http://localhost:8000' + url,
  data: {},
  headers: {},
  withCredentials: true // これが必要
})

 

これでlocalhost:3000から localhost:8000のAPIを叩いてlocalhost:3000のCookieにsessionidがセットされます。

 

参考

https://github.com/ottoyiu/django-cors-headers