Project scenario:
The back-end interface queries to obtain the data in the database, and the front-end accepts the data for list display.
Problem Description
The swagger test of the backend interface is correct, but the frontend reports an error 500: required request body is missing
solution:
Give the following two reasons and solutions:
1. Backend reason: The parameter of the interface function in the controller should be the request body @RequestBody instead of @RequestParam
@PostMapping({
"/getDisposeDataByCondition"})
public ResponseMessage<String> createUser(@RequestParam("name") String name,
@RequestParam("code") String code){
};
Change to:
@PostMapping({
"/getDisposeDataByCondition"})
public ResponseMessage<FarmDataPageRespVO> createUser(@RequestBody FarmDataPageReqVO reqVO){
};
2. Front-end reason: When POST and GET requests are different, the request parameters in the interface are different
When the interface function parameter is filled with formData:
(1) params:params in GET request
//查询获取列表信息
export async function getFileList(params:any) {
return http.request({
url: `/api/api-gis/v1/originData/getFileList`,
method: 'GET',
params:params
})
}
(2) data:params in POST request
//查询获取列表信息
export async function getdataList(params:any) {
return http.request({
url: `/api/api-gis/v1/handle/getDisposeDataByCondition`,
method: 'POST',
data:params
})
}
Sometimes the parameters encapsulated by axios must also be paid attention to, such as: body
interface function parameters {parameter 1, parameter 2, ...}
export const addDeviceInfo = (body: any) => {
return request(`/api-telematics-pc/v1/farmdevicemanager/addDeviceInfo`, {
method: 'post',
body
});
};
swagger:
**Note:** How to fill in the parameters depends on how the axios of the project is packaged, as you can see from the package code.