fetch localhost without redirecting to https?

Question

In the development environment, I don't want to make things complicated by using https and SSL/STL certifications.

I learned how to prevent Google Chrome from redirecting localhost to https, and a JSON object returned after entering http:/localhost:105/hello/ into the Chrome address bar.

What confused me is that the following does not work in the browser console(Inspect->Console) for https pages:

const url = new URL('http://localhost:105/hello/');
fetch(url).then(response => response.json()).then(json => console.log(json))

The error reads that:

GET https://localhost:105/hello/ net::ERR_SSL_PROTOCOL_ERROR
Uncaught (in promise) TypeError: Failed to fetch
at :1:1

And adding parameter {redirect: 'manual'} in the fetch method doesn't help.

Thanks to @novavanity. It does work on the page with the url http://localhost:105/hello/

I don't know why and how the http was redirected to https? How can I prevent that?

NovaVanity · Accepted Answer · 2022-12-02 08:10:16Z

0

When you use fetch() in the browser, it automatically uses the HTTPS protocol if the current page is loaded over HTTPS. This is probably why you are getting the

ERR_SSL_PROTOCOL_ERROR

error when trying to access http://localhost:105/hello/ using fetch().

To prevent fetch() from using HTTPS, you can use the base option in the Request object that you pass to fetch():

const url = new URL('http://localhost:105/hello/');
const options = {
  base: 'http://localhost:105/'
};

fetch(url, options).then(response => response.json()).then(json => console.log(json))

edited Dec 2, 2022 at 8:10

answered Dec 2, 2022 at 8:09

NovaVanity

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Lerner Zhang Over a year ago

You are right. It is because of the current page's https, but the base option seems does not work.

pudgyfrog · Accepted Answer · 2023-05-10 18:59:36Z

0

Sometimes, the redirect from HTTP to HTTPS happens due to a 307 error code (internal redirect). You can check this in the 'Network' tab of Chrome's Developer tools panel.

Where the network tab is located

So, if you had previously had the URL as HTTPS, you might want to clear your cache on Chrome and restart the app. Hope that helps.

edited May 10, 2023 at 18:59

answered May 9, 2023 at 21:04

pudgyfrog

13 bronze badges

Comments

Mostafa · Accepted Answer · 2025-05-24 16:07:17Z

0

I have had the same problem for 2 weeks ..when developing a Chrome add-on that injects some code into one site, the problem was that I tried to fetch data from localhost, which is HTTP from a HTTPS domain. The problem was solved when I added PEM cert files to php.ini config and enable https on localhost

Hope this helps someone.

answered May 24 at 16:07

Mostafa

1,0591 gold badge15 silver badges26 bronze badges

Collectives™ on Stack Overflow

fetch localhost without redirecting to https?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related