Axios.post in Vue uses JSON data transfer, a solution where the Request header field content type is not allowed

Problem Description:

Because the restful interface needs to pass two fields in the head header:

Content-type:application/json
Access-token:84c6635800b14e0eba4f7ece65e095a1

However, inside the Vue.js configuration:

Occurs when a send is performed:

It means that the advance request is not passed, and the request is no longer formally made.

After repeated testing, found that the header contains a custom field, the browser will first make an options request, if the request passed, then continue to send a formal post request, and if not passed, return the above error

Then you can only configure options on the server to return the request, the code is as follows:

  TODO supports cross-domain access        to Response.setheader ("Access-control-allow-origin", "*");        Response.setheader ("Access-control-allow-credentials", "true");        Response.setheader ("Access-control-allow-methods", "*");        Response.setheader ("Access-control-allow-headers", "Content-type,access-token");        Response.setheader ("Access-control-expose-headers", "*");        if (Request.getmethod (). Equals ("Options")) {            Httputil.setresponse (response, HttpStatus.OK.value (), null);            return;        }

The above code needs to be added to the allowed headers, Content-type and Access-token, and when judging the request method is options, return OK (200) to the client, in order to continue to send a formal post request.

The POST request was successfully made after the modification.

In the request header to pass what parameters, it is necessary to add parameters on the server, the name must be consistent

Ps:

Read the Internet so many explanations, basic can not be used, about Axios custom header field problem, it seems that only the above method can solve

Axios.post in Vue uses JSON data transfer, which is a solution where the Request header field content type is not allowed