React Native axios 总是返回“请求失败，状态码 400”

Question

我正在尝试将我的 react 本机登录与后端连接起来。我使用 axios ^0.16.2 调用 API，但它总是返回“错误：请求失败，状态码 400” 我有什么：

export const loginUser = ({ email, password }) => {
        return (dispatch) => {
                axios.post('http://localhost:8080/api/users/login',
                        {
                                email,
                                password
                        },
                        {
                                Accept: 'application/json',
                                'Content-Type': 'application/json',
                        }
                )
                        .then(response => {
                                console.log(response);
                                dispatch({
                                        type: LOGIN_USER,
                                        payload: response.data.status
                                });
                                Actions.home();
                        })
                        .catch(error => {
                                console.log(error);
                                dispatch({
                                        type: LOGIN_USER,
                                        payload: error
                                });
                        }
                );
        };
};

编辑： 很确定请求正文是正确的，因为数据库包含所有正确的信息。

我附上了我这里的 API，我使用了 Java Spring Boot：

@Controller
@RequestMapping(value = "api/users", produces = {MediaType.APPLICATION_JSON_VALUE})
public class UserController {
 /**
     * Log a user in
     * @param request
     * @return
     * @throws DuplicatedUserException
     * @throws InvalidRequestException
     */
    public static class UserLoginRequest implements ValiatedRequest {

            private String username;
            private Integer gmtShift;
            private String email;
            private String password;

            @Override
            public void validate() throws InvalidRequestException {
                    if (email == null || email.isEmpty()) {
                            throw new InvalidRequestException("email is empty.");
                    }
                    if (gmtShift == null || gmtShift < -12 || gmtShift > +12) {
                            throw new InvalidRequestException("gmtShift is empty or invalid.");
                    }
                    if (username == null || username.isEmpty()) {
                            throw new InvalidRequestException("user name is empty.");
                    }
                    if (password == null || password.isEmpty()) {
                            throw new InvalidRequestException("password is empty.");
                    }
                    if (!RegexUtil.EMAIL.matcher(email).find()) {
                            throw new InvalidRequestException("email is invalid.");
                    }
                    if (password.length() > 32) {
                            throw new InvalidRequestException("password cannot be longer than 32 characters.");
                    }
            }

            public String getUsername() {
                    return username;
            }

            public void setUsername(String username) {
                    this.username = username;
            }

            public String getEmail() {
                    return email;
            }

            public void setEmail(String email) {
                    this.email = email;
            }

            public String getPassword() {
                    return password;
            }

            public void setPassword(String password) {
                    this.password = password;
            }

            public Integer getGmtShift() {
                    return gmtShift;
            }

            public void setGmtShift(Integer gmtShift) {
                    this.gmtShift = gmtShift;
            }
    }

    @RequestMapping(value = "login", consumes = {MediaType.APPLICATION_JSON_VALUE}, method = RequestMethod.POST)
    @ResponseBody
    public Response loginUser(
            @RequestBody UserLoginRequest request) throws AuthenticationException,
                                                          InvalidRequestException {
            request.validate();
            userService.authenticate(RequestContextHolder.currentRequestAttributes().getSessionId(),
                                     request.getGmtShift(),
                                     request.getUsername(),
                                     request.getEmail(),
                                     request.getPassword());
            return new Response(Status.Success);
    }
}
}

Answer 1

您可能没有以正确的方式发送请求。我也遇到了同样的错误，但是我设法解决了一些问题。 我正在添加我的代码，希望这会对某人有所帮助。

axios.post('Api Url',
  {
      'firstName': firstNameValue,
      'lastName': lastNameValue,
      'stateId': stateValue,
      'email': emailValue,
      'password': passwordValue,
      'deviceInfo': deviceInfo 
  },{
      "headers": {
        'Content-Type': 'application/json',
      }
  }).then((response) => {
     console.log("reactNativeDemo","response get details:"+response.data);
  })
  .catch((error) => {
     console.log("axios error:",error);
  });

Answer 2

我明白了！

1. 导入qs.js;
2. 使用此代码：

axios.post(Uri,Qs.stringify(data))
  .then(function(result){})
  .catch(function(error){});

1. 因为您的 API 被 " @RequestBody" 或 "@RequestParam" 获取参数！