net::ERR_EMPTY_RESPONSE 当 API 请求返回响应时

Question

首先这在以前可以工作，但是当我打开代码以进行进一步更改以添加 redux 时，它停止工作。

我正在从 Axios 向后端 API 发送登录请求。但是当我点击提交按钮时它似乎不起作用。即使它不打印console.log("I am in ") 语句。但是当我进入网络选项卡并看到 xhr 时，我看到了图像中附加的输出。最后一天一切正常。但是现在我没有得到任何响应，甚至没有控制台语句来查看我是否要进入提交表单功能。

这是我的代码 SignIn.js

 let submitForm = (e) => {
        e.preventDefault();
        console.log("I am in ");  //button click not printing this statement but axios request is made

        let loginDataObject = {
            email: formDetails.userEmail,
            password: encryptThis(formDetails.LoginPassword)
        }
      
        // Axios request 
        const url = 'http://localhost:5000/api/v1/users/login'
        axios({
            method: 'post',
            url: url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            data: loginDataObject
        })
        .then(res => {
                const status = res.status;
                const userEmail = res.data.data.user.email;
                if (status === 200) {
                    let userObject = {
                        email: JSON.stringify(userEmail),
                        tk: JSON.stringify(res.data.token)
                    }
                    localStorage.setItem('currentUser', JSON.stringify(userObject));
                }
            })
            .then(() => {
                history.push('/dashboard')
            })
            .catch(err => {
                // if password is incorrect
                console.log(err);
            })
        }

return (

   <input type="button" onClick={submitForm} className="btn btn-primary mainGreenBtnFullWidth" value="Log In" />
)

```

Answer 1

很可能是与网络相关的错误。根据控制台日志，您的请求似乎没有到达服务器，并且您没有响应来检查您的代码。由于CORS 错误或 DNS 配置错误，您可能会遇到类似的错误。

要捕获这些类型的错误，由于您没有回复，您可以这样写Axios interceptor：

axios.interceptors.response.use(
      (response) => {
        return response;
      },
      (error) => {
        if (typeof error.response === "undefined") {
          console.log("network error");
          window.location.href = "/error-page";
        }
        if (error.response.status === 401) {
          // Authorization error
          window.location.href = "/signin";
        } else if (error.response.status === 500) {
          // Server error
          window.location.href = "/500-error";
        } else {
          return Promise.reject(error);
        }
      }
);

当然，这并不能解决您的实际问题，但您可以通过显示某种错误来改善用户体验。