Why my browser sent duplicate requests to the server for a page?

I have a specific page in one of my webapps, requesting which from browser sent duplicate requests to the backend controller. We spent hours and hours but found no clue: there was no page refresh tag in head, no JavaScript that would invoke a reload, no favicon problem.

I then started removing chunks from my HTML page one by one and stumbled upon a tag removing which fixed the duplicate request problem. And this tag was, to my surprise, a little innocent <img/> tag.

It turned out that <img/> tag had # as its src. As soon as the page (let’s say localhost:3000/edit-content?id=xxx) loaded, browser sent another request to # to pull content of the image. The # translated into the URL of the same page (i.e. localhost:3000/edit-content?id=xxx#), hence my controller at server received duplicate requests for one page.

So I reset the initial “src” of the <img/> tag to an empty string which finally fixed the problem.