javascript - 在 OPTIONS 为 CORS 返回 200 后,Axios 不处理来自 POST 的 500
问题描述
问题
Axios 没有按预期处理 500。遵循Axios 错误处理提供的方式,但它不起作用。
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)部分被执行,但实际上是else 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
环境
axios 0.18.0 和 Ubuntu 18 LTS 中的 Google Chrome 70.0.3538.77。
问题
请建议如何正确处理 500。
研究
如何使用 Redux/Axios 捕获和处理错误响应 422?似乎有相同的错误问题被设置为堆栈跟踪并且响应似乎没有被填充。
编辑:我仍然不明白为什么记录错误会返回该堆栈消息。我试着像这样记录它。然后你实际上可以看到它是一个对象。
解决方案
你的问题是不是很简单...
为什么不
error.response
存在?
如果是这样,原因是处理您的POST
请求的资源没有响应Access-Control-Allow-Origin
标头,即使它对飞行前OPTIONS
请求也是如此。
由于 CORS 策略,您的客户端代码因此被拒绝访问HTTP 响应,因此error.response
未定义。
在您的错误处理程序中,您可以假设空response
属性等同于网络级问题。