JavaScript: Fetch Headers: Object literal does not add custom header, new Header() obj does

Question

Theres this example:

const myInit = {
  method: 'GET',
  headers: {
    'Accept': 'image/jpeg'
  },
  mode: 'cors',
  cache: 'default'
};

let myRequest = new Request('flowers.jpg', myInit);

You can see the headers object is just a normal object literal, but when I try, this code does not add the custom header:

        const PWA_FETCH_BYPASS = "X-PWA-Fetch-Bypass"
        let init = {
            headers: {
                PWA_FETCH_BYPASS: 'true'
            },
        }
        let response = await fetch(url, init)

But this code does add the custom header:

        const PWA_FETCH_BYPASS = "X-PWA-Fetch-Bypass"
        let myHeaders = new Headers();
        myHeaders.append(PWA_FETCH_BYPASS, 'true')
        const init = {
            headers: myHeaders
        }

        let response = await fetch(url, init)

Why does object literal version not add the custom header?

`myHeaders.append(PWA_FETCH_BYPASS, 'true')` is an error; the first parameter has to be a string. (I didn't downvote.) — Pointy, Feb 03 '22 at 19:51
Thanks for pointing that out, I added the missing constant, sorry that was unclear — run_the_race, Feb 03 '22 at 19:53
"header object is" did you mean the `myInit.headers` plural name there? — Mark Schultheiss, Feb 03 '22 at 19:54
Why the aversion to putting on semi-colons: `const PWA_FETCH_BYPASS = "X-PWA-Fetch-Bypass"` vs `const PWA_FETCH_BYPASS = "X-PWA-Fetch-Bypass";` — Mark Schultheiss, Feb 03 '22 at 19:55
Thanks for the suggested post, that was the root cause, I am used to python dictionaries, so I didn't realise the variable name needs to {be `[PWA_FETCH_BYPASS]: 'true' }` — run_the_race, Feb 03 '22 at 19:57
@MarkSchultheiss because I run real code through prettier, which adds the colons for me (which I always forget cause I primary code in python). — run_the_race, Feb 03 '22 at 19:58
@MarkSchultheiss Yes I ment plural form, I corrected it. You have an eye for details! — run_the_race, Feb 03 '22 at 20:03

JavaScript: Fetch Headers: Object literal does not add custom header, new Header() obj does

0 Answers0