javascript - 检查 Axios Promise catch block VueJs 中的 HTTP 状态代码

Question

VueJS 新手。我有以下代码，使用 axios 从 Controller 检索数据:

SubmitForm: function () {
    axios({
      method: 'post',
      url: '/Home/SubmitedForm',
      data: { "Fields": this.$data }
    }).then(res => {
      alert('Successfully submitted the form ');
      window.close();
      }).catch(err => {
        if (err.response.status == 409) {
          alert(`Already exists. See details: ${err}`)
        }
        else {
          alert(`There was an error submitting your form. See details: ${err}`)
        }

    });

当 Controller 方法 SubmittedForm 返回 409 时，我想抛出一个特定的警报，否则只抛出一个通用警报。基于此页面:https://gist.github.com/fgilio/230ccd514e9381fafa51608fcf137253我写了上面的代码。然而，即使返回的 http 状态是 409，它仍然显示通用警报。我很确定我在这里缺少一些理解。有人可以帮我找出我在这里做错了什么吗？在本地主机上按预期工作，但在 azurewebsites 上发布后，它再次显示一般错误。

Answer 1

也许您的 API 端点会阻止 CORS 策略，那么您将无法读取此类错误的状态(尽管它在开发工具的“网络”选项卡中可见)。

您可以安装“CORS随处可见”之类的浏览器扩展来测试它是否有效，但默认情况下，任何被 CORS 阻止的 API 调用都会在浏览器控制台中显示警告/错误。