Fetching from API in React with key in headers, returning 406 not acceptable

Question

I'm trying to fetch from an API, using an API key, but keep getting 406 Not Acceptable. I can get the request to work in Postman, but not in the code. What could be wrong here? I've tried all sorts of ways of including my info in headers, this is just my last attempt.

componentDidMount() {
    fetch("my-api", {
      method: "GET",
      headers: ({
      Accept: "application/json",
      "Content-Type": "application/json",
      "X-Api-Version": 20161108,
      Authorization: {
          Token: "my-api-key",
      }
     }),
      body: JSON.stringify()
    }).then(response => {
      if (response.status === 201) {
        console.log(response)
        return response.json()
      } else {
        console.log("oh no!", response.status === 404)
      }
    })
  }

check this, developer.mozilla.org/en-US/docs/Web/HTTP/Status/406. Maybe the content that you are trying to work with isn't quite accepted in the same format as you would expect by the server — Shubham Khatri
– Shubham Khatri, Commented Sep 22, 2018 at 11:04
Try adding credentials: 'include'. Without that, the browser doesn’t actually add the Authorization header to the request it sends. See developer.mozilla.org/en-US/docs/Web/API/Fetch_API/… — sideshowbarker
– sideshowbarker, Commented Sep 22, 2018 at 11:07
I have added Accept: "application/json, text/plain, */*", and credentials: include, but still not working. The api is based on jsonapi.org so I don't get why this seems so complicated? — Cecilia Wong
– Cecilia Wong, Commented Sep 22, 2018 at 11:22
Does this answer your question? Setting authorization header in Fetch API — VLAZ
– VLAZ, Commented Sep 5, 2023 at 10:26

Cecilia Wong · Accepted Answer · 2018-09-22 11:37:15Z

1

I figured it out. This ended up working:

componentDidMount() {
        fetch("my api", {
          method: "GET",
          headers: ({
          Accept: "application/vnd.api+json",
          "Content-Type": "application/json",
          "X-Api-Version": 20161108,
          Authorization: "Token my token",
         }),
          body: JSON.stringify()
        }).then(response => {
          if (response.status === 200) {
            console.log(response)
            return response.json()
          } else {
            console.log("oh no!", response.status === 404)
          }
        })
      }

answered Sep 22, 2018 at 11:37

Cecilia Wong

335 bronze badges

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

Collectives™ on Stack Overflow

Fetching from API in React with key in headers, returning 406 not acceptable

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related