Using the Fetch API with API key header

Question

How do we configure the Fetch API to include the API key header?

I've created an API that I can successfully receive responses from POSTMAN or Fiddler by including the API key in the headers.

However, from my code (React / Javavascript) using the following snippet fails;

        return fetch(url)
      .then(response => response.json(),{
        mode: 'cors', 
        headers: {
          'x-api-key': '5485748746547e847483983343433243',
          'User-Agent' : 'My-App',
          'Accept': '*/*',
        },
      })
      .catch(error => console.log('Error while fetching:', error))

In Postman I can remove all the headers except the x-api-key and it works fine. No combination of headers or configuration seems to work in my code.

If I capture the request in Fiddler, the x-api-key header has not been added by the Fetch request.

What is the correct way to configure fetch to send the api key header?

Leroy · Accepted Answer · 2021-05-10 21:29:44Z

2

Your options are in the wrong place. They should be in the 2nd parameter of the fetch function.

return fetch(url, {
    mode: 'cors', 
    headers: {
      'x-api-key': '5485748746547e847483983343433243',
      'User-Agent' : 'My-App',
      'Accept': '*/*',
    },
  })
  .then(response => response.json())
  .catch(error => console.log('Error while fetching:', error))

answered May 10, 2021 at 21:29

Leroy

2,1721 gold badge17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

djnz Over a year ago

Thanks - I did not notice I'd copied my code into the wrong line. thanks for the code review!

Collectives™ on Stack Overflow

Using the Fetch API with API key header

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related