React Redux Fetch action returning "415 (Unsupported Media Type)" and "401 (unauthorized)"

Viewed 10523

I have an action that creates a fetch to POST a client back to the API.

I send a JWT in the "headers" which by itself is not the problem as its also used in a GET that works just fine... but not in a POST. Here is my action:

export const createNewClient = (payload) =>
  (dispatch, getState) => {
    dispatch({ type: REQUEST_CREATE_NEW_CLIENT, payload })

    const jwt = getJwt()
    if (!jwt) {
      throw new Error('No JWT present')
    }
    const token = jwt.access_token
    const headers = new Headers({
      'Authorization': `bearer ${token}`
    })
    debugger
    const task = fetch('/api/client/create', {
      method: 'POST',
      body: JSON.stringify(payload),
      headers,
    })
      .then(handleErrors)
      .then(response => response.json())
      .then(data => {
        dispatch({ type: RECEIVE_CREATE_NEW_CLIENT, payload: data })

        dispatch({
          type: SAVE_MESSAGE, payload: {
            message: "Successfully saved client",
            type: 'success'
          }
        })
      })
      .catch(error => {
        //clearJwt()
        dispatch({ type: ERROR_CREATE_NEW_CLIENT, payload: error.message })

        dispatch({ type: SAVE_MESSAGE, payload: { message: error.message, type: 'error' } })
      })
    addTask(task)
    return task
  }

I tried modifying the headers to include UTF-8 like so.

  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },

However this just gave me 401 Unauthorized which means that by using this it is the correct media type but now wont be accepted.

That same JWT works fine in a Fetch GET command so the JWT itself is not the problem - I believe it might be the way I am writing the "Fetch".

Now I do the same thing in Postman and I get through but not with this Fetch...

What have I missed or incorrectly structured for a Fetch POST so that JWT is accepted etc

enter image description here

1 Answers
Related