BETA

No 'Access-Control-Allow-Origin'をDjango Rest Frameworkで解決する CORS

投稿日:2020-06-21
最終更新:2020-06-30

CORSとは

CORS(Cross Origin Resourse Sharing)は異なるドメイン同士でJavaScriptのXMLHttpRequestやfetchなどのAJAX通信をする際に、安全にやりとりができるよう定められた規約

【CORS】クロスドメインによるエラーを解決する から引用
https://developer.yukimonkey.com/article/20200227/

この規約があるため、許可がないと勝手に情報取れないよ!ということです

No 'Access-Control-Allow-Origin'を解決

上記の許可がもらえてないと
No 'Access-Control-Allow-Origin'
というエラーがでます

  1. django-cors-headersをインストール
  2. setting.pyを編集

django-cors-headersをインストール

pip install django-cors-headers

setting.pyを編集

INSTALLED_APPS = (  
    'corsheaders',  
)  

MIDDLEWARE = [  
    'corsheaders.middleware.CorsMiddleware',  
]  

CORS_ORIGIN_ALLOW_ALL = True  

これを追加すれば完了!

許可するドメインを指定したい場合は

INSTALLED_APPS = [  
    'corsheaders',  
]  

MIDDLEWARE = [  
    'corsheaders.middleware.CorsMiddleware',  
    'django.middleware.common.CommonMiddleware',  
]  

CORS_ORIGIN_WHITELIST = (  
    'localhost:3000/',  
    'localhost:3000',  
    '127.0.0.1:3000/',  
    '127.0.0.1:3000',  
)  

このように指定します!

参考
https://developer.yukimonkey.com/article/20200227/
https://qiita.com/MuuKojima/items/334f9d59e7ba6fc75987
https://murabo.hatenablog.com/entry/2018/02/01/121925
https://qiita.com/HIJIKI/items/ed4badee7ef37e30b957
https://qiita.com/att55/items/2154a8aad8bf1409db2b

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

じゃーにゃりすとの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう