Ad

Is The Format Of This Vue Resource Header Wrong?

- 1 answer

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?

Ad

Answer

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:

Ad
source: stackoverflow.com
Ad