React Native axios always returns 'Request failed with status code 400'
11,078
Solution 1
It may be possible that you are not sending the request in a proper way. I was also getting the same error, but some how I managed to fix the issue. I am adding my code, hope this will help someone.
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);
});
Solution 2
I got it!
- import
qs.js
; - with this code:
axios.post(Uri,Qs.stringify(data))
.then(function(result){})
.catch(function(error){});
- Because your API get para by
" @RequestBody"
or"@RequestParam"
!
Related videos on Youtube
Author by
frogLuan
Updated on June 04, 2022Comments
-
frogLuan over 1 year
I'm trying to hook up my react native login with the backend. I use axios ^0.16.2 to call the API, but it always returns me 'Error: Request failed with status code 400' What I have:
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: Pretty sure the request body is correct because the database has all the correct info.
I attached the API I have here, I used 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); } } }
-
bennygenel about 6 yearsMight be related to your api. Please add related code from your api too.
-
Luís Brito about 6 yearsAre you sure the information is being correctly sent to the API? Post the full request information, you can get it by inspecting the JS using React Native Debugger or Chrome Inspector, and then clicking in the desired request in the Network tab.
-
soutot about 6 yearsTry using Postman to check if the API is returning the result as expected, then add some console.logs to debug either the API or your axios. getpostman.com
-
frogLuan about 6 yearsyea. I did test it on postman and all works fine. It just does not work in react native. Im so confused about whats going on here...
-
Panagiotis Vrs about 6 yearstry setting content-type like axios.defaults.headers.post['Content-Type'] = 'application/json' and see if something is changed... Also share your postman test as well
-
-
Corey Cole over 5 yearswhy do we need Qs to use axios? Make no sense that this is required... I'm getting the same error today and my code was working fine yesterday