问题

Question

问题

Axios无法按预期处理500。遵循Axios error handling提供的方式，但是不起作用。

POST正在发送用户名/电子邮件和密码，但是故意将密码设置为不正确的密码以测试错误处理。如果设置了正确的密码，则可以正常使用。

    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);
    })

结果

应该执行是否执行了（error.response），但实际上执行了否则执行了 if（error.request）。

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, …}

在Chrome开发者工具中，OPTIONS方法返回200，如下所示。

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方法返回预期的500。

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

环境

在Ubuntu 18 LTS中具有Google Chrome 70.0.3538.77的AXios 0.18.0。

问题

请建议如何正确处理500个。

研究

How to catch and handle error response 422 with Redux/Axios?似乎具有相同的错误问题，即将其设置为堆栈跟踪，并且似乎未填充响应。

编辑：我仍然不明白为什么记录错误会返回该堆栈消息。我试图这样记录它。然后您实际上可以看到它是一个对象。

Answer 1

您的问题只是...

为什么error.response不存在？

如果是这样，原因是因为处理您的POST请求的资源没有响应Access-Control-Allow-Origin标头，即使它针对飞行前的OPTIONS请求也是如此。

由于有CORS政策，因此您的客户端代码被拒绝访问，因此未定义error.response。

在错误处理程序中，您可以假定空的response属性等于网络级问题。

OPTIONS为CORS返回200后，Axios无法处理POST中的500

问题

结果

环境

问题

研究

1 个答案: