Django 响应代码 200 React 接受错误代码

Question

我有一个带有 React 前端和 Django rest API 后端的网络应用程序。当我输入正确的用户名和密码登录时，我收到了当用户名或密码错误时应该出现的消息。

反应代码：

fetch('/token-auth/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({username: this.state.username, password: this.state.password})
    })
      .then(res => res.json())
      .then(json => {
          if (json.ok) {
              localStorage.setItem('token', json.token);
              this.props.notify_login(this.state.username)
          }
          else {
              this.setState({been_failed: true})
          }
      });

正如您所理解的那样，代码进入了 else 块。但是 Django 服务器打印以下消息说响应代码是 200。

"POST /token-auth/ HTTP/1.1" 200 286

有谁知道是什么导致了这样的事情？

Answer 1

我从未使用过提取 API，但谷歌搜索它，看起来 ok 是响应的属性，而不是 res.json()。这可能就是 else 块被执行的原因，res.json().ok 将是未定义的。请尝试以下操作：

fetch("/token-auth/", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    username: this.state.username,
    password: this.state.password,
  }),
}).then((res) => {
  if (res.ok) {
    const json = res.json();
    localStorage.setItem("token", json.token);
    this.props.notify_login(this.state.username);
  } else {
    this.setState({ been_failed: true });
  }
});

Answer 2

我设法通过切换到 Axios 来修复它，而不是在失败时检查状态代码，而是转到 catch

axios( {
    url: '/token-auth/',
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    data: JSON.stringify({username: this.state.username, password: this.state.password})
})
  .then(response => {
      localStorage.setItem('token', response.data.token);
      this.props.notify_login(this.state.username)
  })
  .catch(error => {
      this.setState({been_failed: true})
  });

Django 响应代码 200 React 接受错误代码

Django response code 200 React accept error code

javascript

django

http

reactjs

jwt-auth