クライアント側: 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
でした。
フロント側の設定が足りてないんでしょうか、もうちょっと調べます。
あなたの回答
tips
プレビュー