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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Django

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

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

Q&A

0回答

2284閲覧

https環境下でAPIと通信ができない(axios+django)

takepan1973

総合スコア821

Django

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

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

0グッド

0クリップ

投稿2019/04/19 17:13

編集2019/04/19 22:28

クライアント側: npm, vue.js, axios
サーバ側: Django2
環境:Docker
OS:Windows/Mac

非https環境では通信ができていました。
http://サーバIP:8080/ (npm)
から
http://サーバIP:8000/api/エンドポイント (Django2)
に通信して、データを取得できていました。

これをhttpsでやろうとすると、上手くいきません。
具体的には、データの取得ができずにしばらく後にタイムアウトエラーのような感じになります。
(Chrome DevToolsでの表示はStatus=(failed))

ただ、そのデータが取得できないエンドポイントURLにブラウザで直接アクセスすると、
データが表示されます。

クライアント側の設定としては、

  • api/index.js

Javascript

1const client = axios.create({ 2 xsrfHeaderName: 'X-CSRF-Token', 3 withCredentials: true, 4 baseURL: process.env.API_ENDPOINT, 5 headers: { 6 Authorization: { 7 // トークンがあれば送出 8 }, 9 }, 10})

サーバ側の設定としては、

  • 起動コマンド
python manage.py runsslserver 0.0.0.0:8000 --certificate {ファイル} --key {ファイル}
  • settings.py(一部)

Python

1ALLOWED_HOSTS = [ 'サーバIP', 'サーバIP:443' ] 2 3INSTALLED_APPS = [ 4 'corsheaders', 5 'sslserver', 6 () 7] 8 9CORS_ORIGIN_ALLOW_ALL = True 10SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https') 11SECURE_SSL_REDIRECTT = True 12SESSION_COOKIE_SECURE = True 13CSRF_COOKIE_SECURE = True
  • クライアント側

https://サーバIP/ (nginx)
http://サーバIP:8080/ (npm)

  • サーバ側

https://サーバIP:8000/api/エンドポイント (Django2)

設定周りはかなり見たつもりなのですが、解決できないでいます。
よろしくお願いいたします。


[追記]

ALLOWED_HOSTS に 'サーバIP:443' を追加してみました。
残念ながら、変化はありませんでした。

ブラウザでエンドポイントURIにアクセスするとデータが取れるので、以下をテストしてみました。
Djangoでrunserverします(runsslserverではなく)

以下でtelnetでエンドポイントURIを叩きます。

telnet サーバIP 8000 GET /api/エンドポイント HTTP/1.1 Host: サーバIP

レスポンスとして、とりたいデータが取れていました。

HTTP/1.1 200 OK Date: Fri, 19 Apr 2019 22:04:09 GMT Server: WSGIServer/0.2 CPython/3.7.1 Content-Type: application/json Vary: Accept, Origin Allow: GET, HEAD, OPTIONS X-Frame-Options: SAMEORIGIN Content-Length: 1001 (以下、データ)

次にrunsslserverして、axios経由でアクセスします。

レスポンスコード自体は200です。データはありません。

Access-Control-Allow-Headers: accept, accept-encoding, authorization, content-type, dnt, origin, user-agent, x-csrftoken, x-requested-with Access-Control-Allow-Methods: DELETE, GET, OPTIONS, PATCH, POST, PUT Access-Control-Allow-Origin: * Access-Control-Max-Age: 86400 Content-Length: 0 Content-Type: text/html; charset=utf-8 Date: Fri, 19 Apr 2019 22:21:12 GMT Server: WSGIServer/0.2 CPython/3.7.1 Vary: Origin X-Frame-Options: SAMEORIGIN

よくよく見てみたら、 Request Method: OPTIONS でした。
フロント側の設定が足りてないんでしょうか、もうちょっと調べます。

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

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

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

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

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

Y.H.

2019/04/19 17:20

サーバー側(api)はhttp/httpsどっちでしょうか? 質問に記載の情報では両方書かれていて状況が判りません。 ちなみにhttpsからhttpへのリクエストは出来ません。 もしサーバー側(api)がhttpであれば、こちらもhttpsにしましょう
takepan1973

2019/04/19 21:23

返信ありがとうございます。 下の方に書いておりますように、サーバ側もhttpsです。 ブラウザでアクセスする先は https://サーバIP/ です。 そこに記述されているjsで https://サーバIP:8000/api/エンドポイントにaxios経由でアクセスし、値が取れません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問