Request header not set as expected when using 'no-cors' mode with fetch API

When mode: 'no-cors' is set for a request, browsers won’t allow you to set any request headers other than CORS-safelisted request-headers. See the spec requirements about adding headers:

To append a name/value (name/value) pair to a Headers object (headers), run these steps:

5. Otherwise, if guard is "request-no-cors" and name/value is not a CORS-safelisted request-header, return.

In that algorithm, return equates to “return without adding that header to the Headers object”.

And the reason it’s instead getting set to text/plain;charset=UTF-8 is because the algorithm for the request constructor calls into an extract a body algorithm which includes the following step:

Switch on object’s type:

↪ USVString

• Set Content-Type to text/plain;charset=UTF-8.

So this is what resolved this issue, I switched 'no-cors' to 'cors'. Frankly I thought I had flipped flopped these before because of cross origin issues I was having between my local development workstation and the server I was deploying to but needless to say, when I set this back to mode: 'cors', it all worked again. Both local workstation and server. Why that changes the actual request header, Im not sure. If anyone has answers for that I'll gladly upvote.

Thanks.