CODEWITHSUNDEEP
javascriptaxios
mon
mon

Reputation: 22254

Axios does not handle 500 from POST after OPTIONS returned 200 for CORS

Problem

Axios does not handle 500 as expected. Followed the way Axios error handling provides, but it is not working.

The POST is sending username/email and password but the password is intentionally set to an incorrect one to test the error handling. If the correct password is set, works with no problem.

    axios.post(
        config.apiGateway.URL + ".../signin",
        payload
    ).then(response => {
        console.log(response)
        if(response.status == 200){
            console.log("Login successfull");
            this.setState({token: response.data.JWT_TOKEN});
        } else {
            console.log(response.status)
            this.setError()
        }
    }).catch(error => {
        this.setError()
        console.log(error)
        if (error.response) {
            console.log("--------------------------------------------------")
            // The request was made and the server responded with a status code
            // that falls out of the range of 2xx
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
        } else if (error.request) {
            console.log("*************************")

            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
            // http.ClientRequest in node.js
            console.log(error.request);
        } else {
            console.log("++++++++++++++++++++++++")
            // Something happened in setting up the request that triggered an Error
            console.log('Error', error.message);
        }
        console.log(error.config);
    })

Result

It is expected if (error.response) part is executed but actually else if (error.request) is executed.

Access to XMLHttpRequest at 'https://***-api.us-east-1.amazonaws.com/dev/***/signin' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Login.js:73 Error: Network Error
    at createError (createError.js:17)
    at XMLHttpRequest.handleError (xhr.js:87)
Login.js:82 *************************
Login.js:87 XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}

In Chrome developer tool, OPTIONS method returns 200 as below.

access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
access-control-allow-methods: GET,OPTIONS,POST,PUT
access-control-allow-origin: *
content-length: 0
content-type: application/json
date: Wed, 16 Jan 2019 01:32:48 GMT
status: 200
via: 1.1 ca8c566e53d4556421f22afbb9802d0c.cloudfront.net (CloudFront)
x-amz-apigw-id: Tkp2JEBmIAMFROA=
x-amz-cf-id: HXEEGh3TUcOckodVBKKoA1PVpg6h7UB5Ui3F1svTxpMYovB8Dt7rqQ==
x-amzn-requestid: a2144ccd-192e-11e9-9b6f-2dcad2a22d99

POST method returns 500 as expected.

Request Method: POST
Status Code: 500 
Remote Address: 54.230.245.164:443
Referrer Policy: no-referrer-when-downgrade

Environment

axios 0.18.0 with Google Chrome 70.0.3538.77 in Ubuntu 18 LTS.

Question

Please suggest how to handle 500 properly.

Research

How to catch and handle error response 422 with Redux/Axios? appears to have the same issue of error being set to a stack trace and response seems not get populated.

EDIT: I still dont understand why logging the error returns that stack message. I tried logging it like this. And then you can actually see that it is an object.

Upvotes: 3

Views: 2193

Answers (1)

Phil
Phil

Reputation: 164785

Is your question simply...

why isn't error.response present?

If so, the reason is because the resource handling your POST request does not respond with an Access-Control-Allow-Origin header, even though it does for the pre-flight OPTIONS request.

Due to CORS policy, your client-side code is therefore denied access to the HTTP response and hence, error.response is not defined.

In your error handler, you can assume that an empty response property equates to a network-level problem.

Upvotes: 3

Related Questions