Search code examples
vue.jshttp-headersvue-resource

Is the format of this Vue resource header wrong?

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?

Solution

  • 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: