Vue.js(SPA) + Django クロスオリジン要求をブロックしました、となりアクセスできない

Question

クロスオリジン要求をブロックしましたというエラーを解決できません。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [url]. (Reason: CORS header 'Access-Control-Allow-Origin' missing). 
Error: "Network Error"

    createError createError.js:16 handleError xhr.js:87

フロントエンド（Vue SPA）

http://192.168.xxx.xxx:8000/

バックエンド（Django API風　JsonResponseを返す）

http:/192.168.xxx.xxx:8001/

どちらも同じプライベートIPアドレスにあり、それぞれ別ポートに開いています。
ブラウザに渡したjsファイルからaxiosでget/postしています。

django側では以下のようにcsrf_exemptデコレーターにより検証をスキップしているはずなのですが、
どうもブロックされてしまいます。一体何がいけないのでしょうか？

　

setting.py

INSTALLED_APPS = [
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
]
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

views.py

from django.http.response import JsonResponse
from django.views.decorators.csrf import csrf_exempt

import random


@csrf_exempt
def logging_status(request):
    n = random.randint(1, 20)
    if n % 9 == 0:
        return JsonResponse({"is_logging": False})
    else:
        return JsonResponse({"is_logging": True})

Answer 1

まずは、「CORS」について情報収集を行いましょう。
（大元はこちら）ですが、おそらくスムーズには理解できないでしょう。）

誤解を恐れずざっくり言うと、JavaScriptによる、異なるドメイン（オリジン）間のデータのやりとりはセキュリティ的に危険なのでブラウザは基本的にブロックする。と言う内容です。

どうすればいいか、と言うと、サーバ側で「このデータはクロスオリジンで使っていいよ」と許可を与える必要があります。
Access-Control-Allow-Origin:ヘッダをサーバレスポンスに設定することで、許可を与えます。

Comments

[_Victorique__]

すみません、設定はちゃんとできていたのですが、クライアント側のURLが間違っていたため解決していなかったようです。URLを訂正したところ動きました！

Answer 2

django側では以下のようにcsrf_exemptデコレーターにより検証をスキップしているはずなのですが、

どうもブロックされてしまいます。

ポートが違うために同一生成元ポリシーに引っかかって、ブラウザ側でブロックされています。Django側でAccess-Control-Allow-Originヘッダ（MDN）を返すようにしましょう。

Comments

[_Victorique__]

すみません、設定はちゃんとできていたのですが、クライアント側のURLが間違っていたため解決していなかったようです。URLを訂正したところ動きました！