无法在标头请求上设置授权？

Question

i already have this code on my express server:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Authorization");
  next();
});
app.use('/graphql', graphqlExpress(async(req) => {
  let {user} = await getUser(req.headers.authorization);
  return ({
    schema,
    pretty: true,
    graphiql: true,
    context: {
      user
    }
  })
}))

I thought it was cors problem so I followed from this tutorial in enable-cors for express: https://enable-cors.org/server_expressjs.html

This code is how i process fetching:

let token = localStorage.getItem('token');
const fetchQuery = (operation, variables) => {
  return fetch('/graphql', {
    method: 'POST',
    credentials: 'same-origin',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Authorization': token,
    },
    body: JSON.stringify({query: operation.text, variables})
  }).then(response => {
    // A better error message for request timeouts
    if (response.status === 504) {
      return Promise.reject({
        error: {
          message: 'Request timed out'
        }
      })
    }
    return response.json()
  }).then(responseJson => {
    // https://github.com/facebook/relay/issues/1816
    // https://github.com/facebook/relay/issues/1913
    if (responseJson.errors) {
      return Promise.reject(responseJson.errors[0])
    }
    return Promise.resolve(responseJson)
  })
}

But, even though there's already a token after a user logs in, the authorization sent to server is always null?

Answer 1

localStorage.getItem("token") is not executing, probably due to getItem being an I/O operation, and how exporting works. Move it inside fetchQuery

const fetchQuery = (operation, variables) => {
  const token = localStorage.getItem("token");
  return fetch('/graphql', {
    method: 'POST',
    credentials: 'same-origin',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Authorization': token,
    },
    body: JSON.stringify({query: operation.text, variables})
  }).then(response => {
    // A better error message for request timeouts
    if (response.status === 504) {
      return Promise.reject({
        error: {
          message: 'Request timed out'
        }
      })
    }
    return response.json()
  }).then(responseJson => {
    // https://github.com/facebook/relay/issues/1816
    // https://github.com/facebook/relay/issues/1913
    if (responseJson.errors) {
      return Promise.reject(responseJson.errors[0])
    }
    return Promise.resolve(responseJson)
  })
}