Client (react) cannot access response from Server (express)

Question

I'm working on a post route for an express.js server. I've got a validation function that if not passed, returns a 400 code with message. The client (React), receives the 400 code, but I cannot access the message sent by the server.

This is within the POST in express:

const { error } = validate(req.body);
  if (error)
    return res
      .status(400)
      .send(error.details[0].message);

This is the submit routine in React:

 doSubmit = async () => {   
    const { username, password } = this.state.data;
    const result = await login({ mail: username, password });
    console.log('result', result);
  };

Login is only a wrapper for axios.post method:

export async function login(user) {
  try {
    return await http.post(apiEndpoint, user);
  } catch (ex) {
    console.log(ex.message);
    return ex;
  }
}

Currently, the code works as it is. Submitting an invalid input, such as a password below 5 characters, i get the following in the client:

POST http://localhost:3000/api/auth 400 (Bad Request)

Request failed with status code 400

result Error: Request failed with status code 400
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:78)
    at XMLHttpRequest.wrapped (raven.js:363)

However, if I change the status code sent by the server to "200", I get:

result { full response here along with data property.. data: ""password" length must be at least 5 characters long" }

I've been reading the Express documentation. It doesn't say anything about not sending the response if the code is 400 (although it makes sense to send nothing if bad request). I've also toyed a bit with 'body-parser' but didn't get different results.

However, if I test in postman, it works like a charm! With same input, i get the status code and the message.

Finally, it's ok to validate both the input sent (client) and the data received(server) right? If so, let's say the client is OK with the input, but the server is not. Should the server respond with whatever the problem is (what i'm trying to achieve), or simply say 'ERROR' (current scenario)?

Thank you.

To you last question: yes you should always validate data on the server. — BlackICE
– BlackICE, Commented Feb 3, 2019 at 14:12
validation is best practice thing only, but the issue is different its not related to validation. — Chandan Kumar
– Chandan Kumar, Commented Feb 3, 2019 at 14:18

Chandan Kumar · Accepted Answer · 2019-02-03 14:16:38Z

1

Axios code example, may be given code fix your issue. The issue is with your parameters.

axios({
      url: '/login',
      method: 'post',
      params: { username: 'cedas', password: 'fredsed' }
    }).then(response => {
      resolve(response)
    })
      .catch(error => {
        reject(error)
      });
  })

answered Feb 3, 2019 at 14:16

Chandan Kumar

9199 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matias Salimbene Over a year ago

I've tried this sintax but I'm getting the same behaviour. I get the bad request response, but not the message sent by the server.

Matias Salimbene · Accepted Answer · 2019-02-04 02:31:37Z

1

Well, in the end, the problem was accessing ex.message, instead of ex.response ... Cheers.

answered Feb 4, 2019 at 2:31

Matias Salimbene

6258 silver badges24 bronze badges

Collectives™ on Stack Overflow

Client (react) cannot access response from Server (express)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related