Source:  Twitter logo

axios. post error.

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

I am using the axios, react and redux.

My code is:

  const config = {
    method: 'post',
    url: addActivityUrl,
    data:data,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Content-Type': 'application/json',
    },
  };

  return function (dispatch) {
    axios.request(config)
        .then(function(response){
          dispatch({type:ADD_ACTIVITY_SUCCESS,payload:response.data});
        } )
        .catch((error)=> {
          dispatch({type:ADD_ACTIVITY_ERROR,payload:error});
        })
  }
}

I set the breakpoint in the error callback function. When I send a post request,the error above will show me.

I looked for the answer on Stack Overflow. I don't found the answer yet.

I don't know the reason.

Most you have an issue with custom request headers.

When using custom request header you will get a CORS preflight. This type of request use HTTP OPTIONS and includes Access-Control-Request-Headers listing the headers the client wants to include in the request.

Your client code need to reply to CORS preflight with the appropriate CORS headers. That header needs to contain the same values the Access-Control-Request-Headers.

2 users liked answer #0dislike answer #02
GibboK profile pic
GibboK

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).