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

フルスクラッチの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認証を突破している。

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

参考URL

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

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

Basic認証は、ページに毎回パスワードを入れるのが面倒です。Basic認証ページにパスワード入力なしでアクセスhttp://ユーザ名:パスワード@example.com上記のようにユーザ名と…

qiita.com

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

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

URLにBasic認証のIDとパスワードを埋め込む方法です。 Basic認証が必要なサイトで毎回IDとパスワードを入力するのが面倒な時に便利です。 Basic認証とは、ブラウザ上で表示される以下の様なダイアログ認証のことです。 構文 構文は

pasomaki.com

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

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

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

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

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

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