【js】Request failed. TypeError: Failed to execute ‘fetch’ on ‘Window’: Request cannot be constructed from a URL that includes credentials: ./xxxxx.php

徒然草2.0

フルスクラッチのJavaScriptアプリケーションにて記事表題の通りエラーになりました。

ログイン認証は済んでいるはずなのに、このfetchメソッドから./xxxxx.phpからJSONデータを受け取るところでこけている。なんで?

Request failed. TypeError: Failed to execute ‘fetch’ on ‘Window’: Request cannot be constructed from a URL that includes credentials: ./xxxxx.php

原因

・「./xxxxx.php」の部分が相対パスになっているため。

また、ログイン認証とは別にBasic認証があって。

・URL形式でBasic認証を突破しているため。

※いわゆる「http://ユーザ名:パスワード@example.com」という形式で記述してBasic認証を突破している。

…上記の2つが条件で部分的に(アプリケーション全体のこの部分という意味)通信の失敗が起こっていた。

参考URL

Basic認証のあるページにユーザ名とパスワードを書いたURLでブラウザからアクセスしました。

Basic認証のあるページにユーザ名とパスワードを書いたURLでブラウザからアクセスしました。 - Qiita
Basic認証は、ページに毎回パスワードを入れるのが面倒です。Basic認証ページにパスワード入力なしでアクセスhttp://ユーザ名:パスワード@example.com上記のようにユーザ名と…

[Web] URLにBasic認証のIDとパスワードを埋め込む

[Web] URLにBasic認証のIDとパスワードを埋め込む | ぱそまき
URLにBasic認証のIDとパスワードを埋め込む方法です。 Basic認証が必要なサイトで毎回IDとパスワードを入力するのが面倒な時に便利です。 Basic認証とは、ブラウザ上で...

解決策としては、fetchする時はフルパスを指定する事。

Basic認証の突破をURLで行わない。

速い話が「横着しないこと」が大切だ。

JavaScriptのフレームワークでは自分のサイトURLはフルパスで取得ができる。

なんだかフルパスだと野暮ったいので相対パスでいいのでは?と思うこともあるがWebブラウザが独自に補完してこのようなバグが生じるので、

フルパスのほうがいいのではないだろうか?(というかフルパスで指定されていることに意味はあるのだ)と思った次第です。

徒然草2.0
スポンサーリンク
シェアする
gomiryoをフォローする
ごみぶろぐ

コメント

タイトルとURLをコピーしました