5

I am using React + Redux on the client side and I have the backend in NET CORE. Client gets data from API using:

        return fetch(`api/login`, requestOptions)
        .then(response => {
            if(!response.ok) {
                return Promise.reject(response.json() as Promise<AuthError>);
            } else {
                return response.json() as Promise<ILoginResponse>
            }
        })

requstOptions are: 

        const requestOptions = {
        method: 'POST',
        headers: {
            'Accept': 'application/json', 
            'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
        };

When the password is wrong, the server returns 

404 Bad request

and the body is: 

{"errorCode":2,"description":"Invalid Password"}

I would like to read the body but with this code, it is not possible because this response.json() as Promise<AuthError> produces an empty object. Is there a way how to read the body of a bad request response?

davez
  • 533
  • 5
  • 21
  • _“When the password is wrong, the server returns `404 Bad request`”_ - yikes. Has whoever set this up gotten their appropriate beating over this yet …? :-) – 04FS Feb 26 '19 at 13:20
  • @04FS sorry, I don't understand what you are saying, can you explain it a bit? – davez Feb 26 '19 at 13:29
  • HTTP status codes have a defined meaning, and for 404, that’s Not Found. Answering any request with that because the provided credentials did not match, is rather wrong. 401 Unauthorized would be much more appropriate. (And an actual Bad Request would be 400 - but that is for when the client sends data the server can not understand at all; merely wrong credentials don’t justify that one either.) – 04FS Feb 26 '19 at 13:33
  • You are rejecting your promise with a promise. You want to reject it with an `AuthError`. – Bergi Feb 26 '19 at 14:25
  • @Bergi but when I put `return Promise.reject(response.json() as AuthError);` it says conversion of type 'Promise' to type 'AuthError' may be a mistake... and couldn't be compiled. – davez Feb 26 '19 at 14:38
  • @davez Yes, and that's right - now the typechecker caught the mistake. See the duplicate on how to do it instead. – Bergi Feb 26 '19 at 14:39
  • @Bergi You were right, it helped. Thanks. – davez Feb 27 '19 at 06:29
  • I solved a similar issue by checking that `response.Ok` is not `True` and then extracting the response via `response.text()` and this gave me the full error message that was generated by the back end – Sau001 Mar 29 '22 at 20:42

2 Answers2

0

As per the Fetch Documentation:

"The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing."

What you can also check is the Response object documentation. In there, you can check if the Response ok is set to false (so, in a then clause check the response.ok) and from that point on you can check the Response.text property. Check also the Response Documentation

Philip Alexander Hassialis
  • 39
  • 5
-1

Have you tried using catch and then inspecting error object?

...
.then(response => response.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.dir(error));
Orkhan Huseynli
  • 909
  • 10
  • 13