Certain Request Headers

Question

I am working on some projects and I came across a problem. The main problem is this:

When I go to an API end-point by typing the at the browser, it loads the html page returned. However, if I hit the same end-point using the Fetch API in an onclick listener, it does not load the page. I am sure the html page arrives as a part of the response tho.

I investigated the problem to see what is causing it. I realized that the request headers differ slightly when the browser is making the request vs fetch api making the request.

The main difference is this: Browser version:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1

Fetch API version:

Accept: */*
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin

I tried modifying these specific headers to match the browser version in the fetch request however, no matter how much I tried, they did not change.

I now know what to do to get the desired functionality. I can either use windows.location and make browser reload or I can use redirect function in my express js server.

What I am asking is this: Are those headers what making my html page not load when the request is sent from a button using Fetch API? What are those headers doing? Are they not modifiable if so, why?