axios -- has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

Project, if you encounter axios cross-domain requests, this error:

Access to XMLHttpRequest at 'http://x.x.x:3000/api/add' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

 solution:

Cross-domain configuration:

// set the cross-domain request 
app.all ( '*', function (REQ, RES, Next) { 
  // set request header 
  // allow access to all sources 
  res.header ( 'Access-Control-Allow -Origin', '* ') 
  // for judging request from the request or traditional ajax res.header ( "access-Control-the allow-Headers", "Origin, X-requested-With-, the Content-the Type, the Accept"); 
  // allow access manner 
  res.header ( 'Access-Control-the Allow-Methods', 'the PUT, the POST, the GET, the DELETE, the OPTIONS') 
  // modified version of the program information 
  res.header ( 'X-Powered-By ', '3.2.1' ) 
  // content type: If this attribute must specify a post request 
  res.header ( 'the content-the type', 'file application / JSON; charset = UTF-. 8') 
  Next () 
})
  

 When the ContentType is application / json, it will send a request twice.

First, the first method is to send a request to the server options, the request asks what request method (get, post, etc.) server support, server support case which requests class support.

Wait until the request returns, if we are prepared to meet the requests of the server rules, then will continue to send a second request, otherwise it will error in the console.