質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

CSRF

クロスサイトリクエストフォージェリ (Cross site request forgeries、CSRF)は、 外部Webページから、HTTPリクエストによって、 Webサイトの機能の一部が実行されてしまうWWWにおける攻撃手法です。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

Q&A

解決済

2回答

1697閲覧

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

_Victorique__

総合スコア1392

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

CSRF

クロスサイトリクエストフォージェリ (Cross site request forgeries、CSRF)は、 外部Webページから、HTTPリクエストによって、 Webサイトの機能の一部が実行されてしまうWWWにおける攻撃手法です。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

0グッド

0クリップ

投稿2019/02/04 06:41

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

js

1Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [url]. (Reason: CORS header 'Access-Control-Allow-Origin' missing). 2Error: "Network Error" 3 4 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

python

1INSTALLED_APPS = [ 2 'corsheaders', 3] 4 5MIDDLEWARE = [ 6 'corsheaders.middleware.CorsMiddleware', 7 'django.middleware.common.CommonMiddleware', 8 'django.middleware.csrf.CsrfViewMiddleware', 9] 10CORS_ORIGIN_ALLOW_ALL = True 11CORS_ALLOW_CREDENTIALS = True

views.py

python

1from django.http.response import JsonResponse 2from django.views.decorators.csrf import csrf_exempt 3 4import random 5 6 7@csrf_exempt 8def logging_status(request): 9 n = random.randint(1, 20) 10 if n % 9 == 0: 11 return JsonResponse({"is_logging": False}) 12 else: 13 return JsonResponse({"is_logging": True})

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

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

投稿2019/02/04 06:49

kazto

総合スコア7196

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_Victorique__

2019/02/04 09:49

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

0

ベストアンサー

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

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

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

投稿2019/02/04 06:47

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_Victorique__

2019/02/04 09:49

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問