javascript - 无法使用 JavaScript fetch 获取响应状态代码

Question

这个问题已经有答案了:

Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not? (15 个回答)

已关闭 4 年前。

我正在尝试创建一个登录表单。当我用 Postman 测试服务时，我会得到一个带有状态代码等的 body 对象。

但是，使用 JavaScript fetch，我无法获取 body 对象，并且刚刚收到一个错误:

export const login = (username,password) => {
    return dispatch=>{
        const basicAuth = 'Basic ' + btoa(username + ':' + password);
        let myHeaders = new Headers();
            myHeaders.append('Authorization', basicAuth);
            myHeaders.append('Content-Type', 'application/json');      
            fetch(`${baseUrl}api/user/login`, {
                withCredentials: true,
                headers: myHeaders
            })
            .then(function (response) {
                return response.json();
            })
            .then(function (json) {
                dispatch(setLoginInfo(json))
            })
            .catch(err =>{
                console.log(err)
                 dispatch(loginFailed())
            });
    }

}

我需要在获取中获取状态代码。

Answer 1

状态代码是status响应对象上的属性。另外，除非您在 error 响应中使用 JSON(当然，有些人会这样做)，否则您需要在调用 json< 之前检查状态代码(或 ok flag )/:

fetch(`${baseUrl}api/user/login`, {
    credentials: "include", // ¹ See note below
    headers: myHeaders
})
.then(function(response) {
    console.log(response.status); // Will show you the status
    if (!response.ok) {
        throw new Error("HTTP status " + response.status);
    }
    return response.json();
})
.then(// ...

不检查请求是否成功是一个常见的错误，我 wrote it up on my anemic old blog .

<小时/>

¹ 您有 withCredentials: true，但是 the documentation说它是凭据:“include”。 (感谢 aderchox 指出这一点。)