Réagir Les axios natifs retournent toujours 'Requête échouée avec le code d'état 400'

Question

J'essaye de connecter ma connexion native avec le backend. J'utilise Axios^0.16.2 pour appeler l'API, mais il me renvoie toujours « Erreur: demande a échoué avec le code d'état 400 » Ce que j'ai:

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 
           }); 
         } 
       ); 
     }; 
}; 

Edit: Jolie que le corps de la demande est correcte parce que la base de données a toutes les informations correctes.

J'attaché l'API que j'ai ici, je 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

Il est possible que vous n'envoyez pas la demande d'une manière appropriée. Je recevais également la même erreur, mais certains comment j'ai réussi à résoudre le problème. J'ajoute mon code, j'espère que cela aidera quelqu'un.

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); });