when user want to login : AXIOS ERROR: [Error: Request failed with status code 401] BAD

i have a react native app and want to login EXISTING USER IN DATABASE with username and password for get the accesstoken and refreshtoken from api/login. but i get 401 error .

error in docker log:


    app_1       | 2022-06-23 20:56:55.997 ERROR 1 --- [nio-8080-exec-3] c.r.hamsafar
.service.UsersServiceImpl    : User Not Found In Database
app_1       | Hibernate:
app_1       |     select
app_1       |         users0_.id as id1_1_,
app_1       |         users0_.activation_code as activati2_1_,
app_1       |         users0_.active as active3_1_,
app_1       |         users0_.disabled as disabled4_1_,
app_1       |         users0_.failed_try_count as failed_t5_1_,
app_1       |         users0_.family as family6_1_,
app_1       |         users0_.lock_time as lock_tim7_1_,
app_1       |         users0_.name as name8_1_,
app_1       |         users0_.national_code as national9_1_,
app_1       |         users0_.password as passwor10_1_,
app_1       |         users0_.sms_time as sms_tim11_1_,
app_1       |         users0_.username as usernam12_1_
app_1       |     from
app_1       |         users users0_
app_1       |     where
app_1       |         users0_.username=?

This is while the user is in the database and it works with the same username and password correctly and without error in postman.

axios codes:

 var formData = new FormData();
  formData.append('username', '0123456789');
  formData.append('password', '0123456789');
  axios.post(
    'http://1.2.3.4:5555/api/login'
    , { formData })
    .then(response => {
          console.log("RESPONSE RECEIVED: ", response);
        })
        .catch((err) => {
          console.log("AXIOS ERROR: ", err);
        })

please help me

CodePudding user response：

You should include the header Content-Type: multipart/form-data

axios({
  method: "post",
  url: "http://1.2.3.4:5555/api/login",
  data: formData,
  headers: { "Content-Type": "multipart/form-data" },
})

The reason you receive 401 is, because you send a JSON body instead of a form data which is a Bad Request

CodePudding user response：

Often these types of error is because your server expects a content-type header, in order to understand how to parse the request body (your form in this case).

Look closely at the request from Postman that works, what does it have that you're omitting in your code?

If you've added form data, I believe postman automatically adds the Content-Type header for the appropriate data you've added.

Try editing your code to something like this (removed wrapping formData in an object & added multipart/form-data content-type header):

var formData = new FormData();
formData.append('username', '0123456789');
formData.append('password', '0123456789');

axios.post('http://1.2.3.4:5555/api/login', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    }
  })
  .then((response) => {
    console.log('RESPONSE RECEIVED: ', response);
  })
  .catch((err) => {
    console.log('AXIOS ERROR: ', err);
  });

Update based on comment revealing Postman using Content-Type application/json:

Try changing header & body to json instead, if that's what your server expects & works in postman:

const data = { username: '0123456789', password: '0123456789' };

axios.post('http://1.2.3.4:5555/api/login', data, {
    headers: {
      'Content-Type': 'application/json',
    }
  })
  .then((response) => {
    console.log('RESPONSE RECEIVED: ', response);
  })
  .catch((err) => {
    console.log('AXIOS ERROR: ', err);
  });