フルスクラッチの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でブラウザからアクセスしました。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9QmFzaWMlRTglQUElOEQlRTglQTglQkMlRTMlODElQUUlRTMlODElODIlRTMlODIlOEIlRTMlODMlOUElRTMlODMlQkMlRTMlODIlQjglRTMlODElQUIlRTMlODMlQTYlRTMlODMlQkMlRTMlODIlQjYlRTUlOTAlOEQlRTMlODElQTglRTMlODMlOTElRTMlODIlQjklRTMlODMlQUYlRTMlODMlQkMlRTMlODMlODklRTMlODIlOTIlRTYlOUIlQjglRTMlODElODQlRTMlODElOUZVUkwlRTMlODElQTclRTMlODMlOTYlRTMlODMlQTklRTMlODIlQTYlRTMlODIlQjYlRTMlODElOEIlRTMlODIlODklRTMlODIlQTIlRTMlODIlQUYlRTMlODIlQkIlRTMlODIlQjklRTMlODElOTclRTMlODElQkUlRTMlODElOTclRTMlODElOUYlRTMlODAlODImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWYwM2MzOTE2MjM1NWY5MDI5N2Q5NzdlNDZjYjYyZjI4&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBwdWdpZW1vbm4mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWQyODdhZDliNDMwNmVkNmI5MDA3ZDVjYWMyNzYyZmI2&blend-x=142&blend-y=486&blend-mode=normal&s=fdcc4ccc61decaa49527e7b769c971ef)
[Web] URLにBasic認証のIDとパスワードを埋め込む
![](https://pasomaki.com/wp-content/uploads/2018/12/web.png)
解決策としては、fetchする時はフルパスを指定する事。
Basic認証の突破をURLで行わない。
速い話が「横着しないこと」が大切だ。
JavaScriptのフレームワークでは自分のサイトURLはフルパスで取得ができる。
なんだかフルパスだと野暮ったいので相対パスでいいのでは?と思うこともあるがWebブラウザが独自に補完してこのようなバグが生じるので、
フルパスのほうがいいのではないだろうか?(というかフルパスで指定されていることに意味はあるのだ)と思った次第です。
コメント