reactjs - 我无法使用 DRF 和 REACT 从 RESTful API 获取数据

Question

在我使用的后端permission_classes = [IsAuthenticated]，我使用rest框架接口登录在端口 8000 上运行 django 服务器，然后我试图从端口 3000 获取数据。所以我想知道为什么port 8000终端有错误

Forbidden: /api/drive-links/
[04/Jun/2021 18:11:01] "GET /api/drive-links/ HTTP/1.1" 403 58

Django 休息框架 API

HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

[
    {
        "id": 1,
        "title": "Clip",
        "link": "https://drive.google.com/file/d/12345"
    }
]

RESTdataSource.js包含

import Axios from "axios";
// Config global defaults for axios/django
Axios.defaults.xsrfHeaderName = "X-CSRFToken";
Axios.defaults.xsrfCookieName = "csrftoken";

export class RestDataSource {
  constructor(base_url) {
    this.BASE_URL = base_url;
  }
  GetData(callback) {
    this.SendRequest("get", this.BASE_URL, callback);
  }
  async SendRequest(method, url, callback) {
    callback(
      (
        await Axios.request({
          method: method,
          url: url,
        })
      ).data
    );
  }
}

并Isloated Table包含

import React, { Component } from "react";
import { RestDataSource } from "./RESTdataSource";

class IsolatedTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      DriveLinks: [],
    };
    this.dataSource = new RestDataSource(
      "http://localhost:8000/api/drive-links/"
    );
  }
  render() {
    return (
      <table className="table table-sm table-striped table-bordered">
        <thead>
          <tr>
            <th colSpan="5" className="bg-info text-white text-center h4 p-2">
              DriveLinks
            </th>
          </tr>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Drive Links</th>

            <th></th>
          </tr>
        </thead>
        <tbody>
          {this.state.DriveLinks.map((p) => (
            <tr key={p.id}>
              <td>{p.id}</td>
              <td>{p.title}</td>
              <td>{p.link}</td>

              <td />
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
  componentDidMount() {
    this.dataSource.GetData((data) => this.setState({ DriveLinks: data }));
  }
}

export default IsolatedTable;

最后我无法从中获取数据，后端api导致的错误在哪里。HTTP response 403django

标签： reactjsdjangodjango-rest-frameworkaxios