No request is sent to load a translation file if a website url includes basic auth credentials

[layerok]

🐛 Bug Report

I encountered a situation in which http-backend connector doesn't even send a request to load a translation file. And simultaneously no error is thrown to the console. During debugging I found a place where the backend connector is making a request and saw that it is making fetch request

fetch('/locales/de/translations.json')

So I decided to make this request myself in the browser console and I got the error

TypeError: Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials: https://login:pass@example.com

I fixed this by explicitly specifing origin in the loadPath option

.init({ backend: { loadPath: 'https://examples.com/locales/de/translations.com' } })

To Reproduce

1. Protect your website by a Basic Auth Authorization
2. Configure your i18n instance to load resources via http-backend connector
3. Open your protected website using url that includes basic auth credentials

Expected behavior

throw an error to the console

TypeError: Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials: https://login:pass@example.com

Your Environment

• runtime version: Chrome 120.0.6099.199
• i18next version: 23.5.1
• i18next-http-backend: 2.2.2
• os: Mac, Windows, Linux
• React SPA

[adrai]

Please create a reproducible example... I just tested with this example: https://github.com/i18next/i18next-http-backend/tree/master/example/jquery and started it like this: http-server . -p 8081 --username usr --password 123

works like expected

[layerok]

It is important to inline credentials in the url to reproduce this bug. Try opening the mentioned example with this url http://usr:123@127.0.0.1:8081/. I already tried it and it reproduced

[layerok]

Oh, sorry, yeah it is working like expected. Warnings are printed to the console... I didn't see warnings on my production site, because I disabled debugging