2017-09-15 13 views
0

私は自分のネイティブログインとバックエンドを接続しようとしています。私は、APIをコールするaxios^0.16.2を使用しますが、それはいつも私を返す「エラー:要求はステータスコード400で失敗しました」私が持っているもの :Reactネイティブaxiosは常に 'ステータスコード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の春ブーツを使用:

@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); 
    } 
} 
} 
+0

あなたのAPIに関連する可能性があります。あなたのAPIからも関連するコードを追加してください。 – bennygenel

+0

情報がAPIに正しく送信されていますか?完全なリクエスト情報を投稿するには、React Native DebuggerまたはChrome Inspectorを使用してJSを調べてから、[Network]タブで目的のリクエストをクリックします。 –

+0

Postmanを使用して、APIが結果を期待どおりに返すかどうかを確認してから、いくつかのconsole.logを追加してAPIまたはAxiosのいずれかをデバッグしてください。 https://www.getpostman.com/ – soutot

答えて

0

あなたが適切な方法でリクエストを送信していないことも可能です。私も同じエラーを抱えていましたが、どのように問題を解決しましたか。 私は自分のコードを追加しています、これが誰かを助けることを願っています。

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

関連する問題