时间戳

首页 > 解决方案 > 在 react app.js fetch 的响应中未获取令牌

django - 在 react app.js fetch 的响应中未获取令牌

问题描述

我正在链接 django 做出反应。

我正在尝试从 react app.js 使用 tokenAuthentication的 Django-rest-framework 端点http://127.0.0.1:8000/api/get-token获取令牌。我已经设置了 corsheaders 和 restframework 所有这些。当我通过命令行使用令牌点击端点时，它可以工作。现在我需要我的 react app.js 中的令牌。我收到状态为 200 的响应，但找不到令牌。由于我是新手，所以我不确定我是否遗漏了什么。//App.js

  componentDidMount() {
    try {
      const data = {username: 'user', password: 'password'};
      fetch('http://127.0.0.1:8000/api/get-token/', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
      }).then(function(response) {
        console.log(response.token);
      })
    } catch (e) {
      console.log(e);
    }
  }

如果您需要更多信息，请告诉我

我在我的 settings.py 中尝试了 TokenAuthentication 和 BasicAuthentication

REST_FRAMEWORK = {
    ...

    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
    ],
  ...
}

标签： djangoreactjsdjango-rest-framework

解决方案

使用 fetch 时，您首先必须使用.response.json().

这是您的代码示例，在获取之后有一个额外then的，以返回一个包含您的数据的新承诺（用 JSON 解析）：

 componentDidMount() {
    try {
      const data = {username: 'user', password: 'password'};
      fetch('http://127.0.0.1:8000/api/get-token/', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
      }).then(function(response) {
        return response.json();
      }).then(function(data) {
        console.log(data.token);
      })
    } catch (e) {
      console.log(e);
    }
  }

注意：如果您从服务器收到的数据不是 JSON，您应该使用response.text()将响应解析为字符串。

推荐阅读