Problem description

During the joint investigation, we encountered two small problems, which have been solved as follows:

1. After the AXIos proxy passes, the Api path retrieved by the back end is the proxy path

Required request parameter ‘userName’ for method parameter type String is not present

3. The problem that the back end cannot get data when the POST request is passed in AXIos

The solutions are as follows:

Api path problem after AXIos proxy

In previous pre-project development, because the AXIOS configuration was already formed into a set of templates, it actually avoided many problems, such as the one encountered here: the reason was that there was no proxy rewrite in the configuration items.

The original configuration is as follows:

proxy: {
  '/api': {
    target: 'http://192.168.22.207:8080/'.changeOrigin: true,}}Copy the code

Add a rewrite item:

proxy: {
  '/api': {
    target: 'http://192.168.22.207:8080/'.changeOrigin: true.pathRewrite: {
      '^/api': ' ' // The proxy character is overwritten as a null character for the API path accepted by the back end}}}Copy the code

Request error handling

The second bug reported by the back end is that a field was not found.

The reason for this is that axios defaults headers to Application/JSON when we use a POST request, but the Web service recognizes content-Type by default: Application/X-www-form-urlencoded, so the data would be packed up after transfer, and the corresponding back-end logic would not be able to fetch specific fields.

The solution to this problem is to use QS to request parameters

import qs from "qs"
INTERCEPTORS(AXIOS_INSTANCE).post(url, qs.stringify(data));
Copy the code

When qs is used, QS automatically sets requests to Content-Type: Application/X-www-form-urlencoded, so there is no need to specify headers values.

Post request in AXIos, the backend can not get data

Post in AXIos has two ways of passing Parameters. One is data corresponding to the Body data on the back end, and the other is Params corresponding to Parameters on the back end.

  • When Parameters are used, content-type is not transmitted, or Application /x-www-form-urlencoded directly, if application/ JSON fails to be transmitted.
  • When Body Data is used, Content-Type can be coded either application/ X-www-form-urlencoded or Application/JSON, the difference is that the Data format is different.

Generally, Get requests use Parameters and Post requests use Body Data

Precisely for Post:

  1. Normal Post request and upload interface, using Parameters
  2. Jsonh and XML point Data Format request interfaces, using Body Data*

To explain in detail, according to the format of post request data, there are two cases: Map format and JSON format:

  • The DATA in the Post request is in map format. When the data in the Post request is in Map format, that is, the parameter name and parameter value are key-value pairs, the Parameters in the request can be added to the Parameters table
  • Post request data is in JSON format. At present, it is popular to transfer parameters in JSON format. When using JMeter, request data in JSON format is added to HTTP request BodyData

In addition, due to Post request mode, if the content-type of Headers is not set, data will be submitted in Application/X-www-form-urlencoded mode by default. To ensure that the Post request is sent in JSON format, you also need to declare that the request parameters are in JSON format in the request header

Record the epilogue

Today encountered these two situations, feel that should not only rely on the brain to record, so I wrote this blog