So I was testing out a new GraphQL endpoint to our headless CMS on my local. I used the GraphiQL explorer to compose the GraphQL query and send an Authorization header as the endpoint required valid credentials.

However, I kept getting a response 401: Unauthorized. The authorization header was never present on the requests. But why when everything seemed to be correct? I was monitoring the requests using the Network tab, logged headers into the console on the server, nothing. For over an hour I could not figure out why my Authorization header is not being sent.

Then I noticed it! A little red line near the closing bracket of my JSON headers definition. There was a trailing comma hidden behind the long Bearer token which made the whole JSON invalid and GraphiQL omitted it from the request. No alert box, no warning, just this tiny little red line 🤦‍♂️

Lesson learned: If your headers are missing even though you defined them, check that your JSON is valid. You know what - always check your JSON is valid :D