how to avoid ( using pure javascript) setting cookies which are set by response headers set-cookie

I have a html page, to which I would like to insert a .html template which is stored in a separate file. I have done it like this:

index.html:

<html>
<body>
  <script src="js/jquery-3.7.1.min.js"></script>
  <script src="js/cookie_consent.js" type="application/javascript"></script>

  <div id="cookie-banner-container"></div>
</body>
</html>

cookie_consent.js


$(document).ready(function() {
  
    // Load the external header HTML into the page
    fetch('/html_templates/template.html')
        .then(response => response.text())
        .then(html => {
            // set contents of template to specific div
            $('#cookie-banner-container').html(html);
        })
        .catch(error => console.error('Error loading template:', error)); 
    console.log("DOMContentLoaded banner");
});

template.html

<div id="mytemplate" > 
   any text
</div>

It all works fine, just when I fetch the template from the server of course I am doing a HTTP Reqest in ordet to get the file hosted on the server. Along with the response, my server is adding some cookies using the SET-COOKIE header:
enter image description here

I have tried to change the code to omit the headers by requesting the template like this:

   fetch('/html_templates/template.html', { credentials: 'omit' })

But the header is still there.

Is there any way I can “take” this html template and insert it into my index.html page to avoid the browser to set the cookies?

Additional information: I am using simple javascript with jquery (I am free to pick any other pure front end libs), I have no access to angular nor react. Also I am planning to load this template for around 100 files similiar to index.html, thats why I want to keep template in a separate file.