Is the format of this Vue resource header wrong?

Question

This is the API specs:

POST /user/v1/profile:
headers: istaging-token: USER_TOKEN
body:{
  buildingLimit: 10
}

And this is how I'm doing it in the code:

api.updateUser = (formData, sessionToken) => {
  return new Promise((resolve, reject) => {
    const URLEnd = '/users/profile'
    const options = api.apiTimeout
    options.headers = { 'istaging-token': sessionToken }
    Vue.http.post(api.serverURL + api.apiVersion + URLEnd, formData, options).then(resp => {
      if (resp.status === 200) resolve(resp)
      else reject(resp)
    }, err => {
      console.log('update user error: ', err)
      reject(err)
    })
  })
}

But I get this error:

Failed to load https://vrbackend.leanapp.cn/api/v1/users/profile: Request header field istaging-token is not allowed by Access-Control-Allow-Headers in preflight response.

Is there something wrong with the formatting of my headers? Or this is a server issue?

score 1 · Accepted Answer · answered Feb 27 '18 at 04:05

Is there something wrong with the formatting of my headers? Or this is a server issue?

It is a server issue.

Check the network tab of the developer tools. The preflight OPTIONS request didn't find istaging-token in the Access-Control-Expose-Headers, thus it is denying access to it.

Solution: the server must return the Access-Control-Expose-Headers containing istaging-token.

Details:

More on the Access-Control-Expose-Headers header and how it works.
More on CORS and the preflight request.

Is the format of this Vue resource header wrong?

1 Answers1