如何使用Django REST和React.js关系处理CSRFToken的真实性？

我正在创建一个Django REST项目。 我创建了一个自定义用户模型，其中我使用rest knox进行令牌身份验证。对于登录和注册用户端点，我使用了自定义视图，在这些视图中，我通过用户的knox令牌对其进行身份验证。对于密码更改端点，我使用了django auth的视图

以下是我面临的问题：

• 当我尝试在可浏览的API中更改端点时；它再次将我重定向到登录页面，但不执行任何操作。但是，用户的Knox令牌是以JSON格式创建和返回的
• 当我在Postman中尝试端点时，它会给出CSRF令牌错误，因为我无法获取CSRF令牌。 我试图创建自己的前端页面来更改密码，有时“csrftoken”会在chrome的cookie表中返回，但并非一直如此。因为我使用JSON响应获取用户令牌，所以我将其设置为React.js上的cookies，并在任何时候到达。然而，react cookie的get方法不适用于csrftoken，它被设置为未定义。最后，我尝试将axios库用于post请求，并为“csrftoken”设置默认头，但看不到任何结果。前端“localhost:3000/change_password/”页面只是通过将传递的参数添加到url的末尾来重定向到自身

视图.py

from django.shortcuts import render
from rest_framework import viewsets, generics
from rest_framework.authtoken.models import Token
from rest_framework.response import Response
from knox.auth import TokenAuthentication
from knox.models import AuthToken
from rest_framework.permissions import IsAuthenticated, AllowAny
from .models import UserProfile
from .serializers import UserSerializer, LoginSerializer, KnoxSerializer, RegisterSerializer
from django.contrib.auth import views, decorators
from django.contrib.auth.decorators import user_passes_test

class UserListAPI(generics.ListAPIView):

    authentication_classes = (TokenAuthentication,)
    permission_classes = (AllowAny,)
    queryset = UserProfile.objects.all()
    serializer_class = UserSerializer


class UserDetailAPI(generics.RetrieveAPIView):

    authentication_classes = (TokenAuthentication,)
    permission_classes = (AllowAny,)
    queryset = UserProfile.objects.all()
    serializer_class = UserSerializer
    lookup_field = 'username'


class LoginAPI(generics.GenericAPIView):

  serializer_class = LoginSerializer

  def post(self, request, *args, **kwargs):

    serializer = self.get_serializer(data=request.data)
    serializer.is_valid(raise_exception=True)
    user = serializer.validated_data
    token = AuthToken.objects.create(user)[1]
    return Response({
      "user": UserSerializer(user, context=self.get_serializer_context()).data,
      "token": token
    })


class RegisterAPI(generics.GenericAPIView):

  serializer_class = RegisterSerializer
  queryset = UserProfile.objects.all()

  def post(self, request, *args, **kwargs):
    serializer = self.get_serializer(data=request.data)
    serializer.is_valid(raise_exception=True)
    user = serializer.save()
    return Response({
      "user": UserSerializer(user, context=self.get_serializer_context()).data,
      "token": AuthToken.objects.create(user)[1]
    })

import os
from decouple import config
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = config('SECRET_KEY')

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'rest_framework',
    'knox',
    'rest_framework.authtoken',
    'accounts',
    'rest_auth',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'Book_Lib_Project.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'Book_Lib_Project.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}


# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': ('knox.auth.TokenAuthentication',),
    'DATETIME_FORMAT': ("%m/%d/%Y %H:%M:%S",),


    'DEFAULT_PERMISSION_CLASSES':(
        'rest_framework.permissions.AllowAny',),
}


AUTHENTICATION_BACKENDS = [
      "django.contrib.auth.backends.ModelBackend",
#      #"accounts.backends.EmailAuthenticationBackend",
  ]

PASSWORD_HASHERS = [
    'django.contrib.auth.hashers.BCryptSHA256PasswordHasher',
    'django.contrib.auth.hashers.PBKDF2PasswordHasher',
    'django.contrib.auth.hashers.PBKDF2SHA1PasswordHasher',
    'django.contrib.auth.hashers.Argon2PasswordHasher',
]

from datetime import timedelta
from rest_framework.settings import api_settings

REST_KNOX = {
  'SECURE_HASH_ALGORITHM': 'cryptography.hazmat.primitives.hashes.SHA512',
  'AUTH_TOKEN_CHARACTER_LENGTH': 64,
  'TOKEN_TTL': timedelta(hours=10),
  'USER_SERIALIZER': 'knox.serializers.UserSerializer',
  'TOKEN_LIMIT_PER_USER': None,
  'AUTO_REFRESH': False,
  'EXPIRY_DATETIME_FORMAT': api_settings.DATETIME_FORMAT,
}

from django.urls import path, include
from .views import UserListAPI, UserDetailAPI, LoginAPI, RegisterAPI, PasswordChangeAPI
from knox import views as knox_views

urlpatterns = [
    path('logout/', knox_views.LogoutView.as_view(), name = "knox_logout"),
    path('users/', UserListAPI.as_view()),
    path('users/<str:username>/', UserDetailAPI.as_view()),
    path('login/', LoginAPI.as_view()),
    path('register/', RegisterAPI.as_view()),
    path('', include('django.contrib.auth.urls')),
    ]

设置.py

from django.shortcuts import render
from rest_framework import viewsets, generics
from rest_framework.authtoken.models import Token
from rest_framework.response import Response
from knox.auth import TokenAuthentication
from knox.models import AuthToken
from rest_framework.permissions import IsAuthenticated, AllowAny
from .models import UserProfile
from .serializers import UserSerializer, LoginSerializer, KnoxSerializer, RegisterSerializer
from django.contrib.auth import views, decorators
from django.contrib.auth.decorators import user_passes_test

class UserListAPI(generics.ListAPIView):

    authentication_classes = (TokenAuthentication,)
    permission_classes = (AllowAny,)
    queryset = UserProfile.objects.all()
    serializer_class = UserSerializer


class UserDetailAPI(generics.RetrieveAPIView):

    authentication_classes = (TokenAuthentication,)
    permission_classes = (AllowAny,)
    queryset = UserProfile.objects.all()
    serializer_class = UserSerializer
    lookup_field = 'username'


class LoginAPI(generics.GenericAPIView):

  serializer_class = LoginSerializer

  def post(self, request, *args, **kwargs):

    serializer = self.get_serializer(data=request.data)
    serializer.is_valid(raise_exception=True)
    user = serializer.validated_data
    token = AuthToken.objects.create(user)[1]
    return Response({
      "user": UserSerializer(user, context=self.get_serializer_context()).data,
      "token": token
    })


class RegisterAPI(generics.GenericAPIView):

  serializer_class = RegisterSerializer
  queryset = UserProfile.objects.all()

  def post(self, request, *args, **kwargs):
    serializer = self.get_serializer(data=request.data)
    serializer.is_valid(raise_exception=True)
    user = serializer.save()
    return Response({
      "user": UserSerializer(user, context=self.get_serializer_context()).data,
      "token": AuthToken.objects.create(user)[1]
    })

import os
from decouple import config
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = config('SECRET_KEY')

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'rest_framework',
    'knox',
    'rest_framework.authtoken',
    'accounts',
    'rest_auth',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'Book_Lib_Project.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'Book_Lib_Project.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}


# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': ('knox.auth.TokenAuthentication',),
    'DATETIME_FORMAT': ("%m/%d/%Y %H:%M:%S",),


    'DEFAULT_PERMISSION_CLASSES':(
        'rest_framework.permissions.AllowAny',),
}


AUTHENTICATION_BACKENDS = [
      "django.contrib.auth.backends.ModelBackend",
#      #"accounts.backends.EmailAuthenticationBackend",
  ]

PASSWORD_HASHERS = [
    'django.contrib.auth.hashers.BCryptSHA256PasswordHasher',
    'django.contrib.auth.hashers.PBKDF2PasswordHasher',
    'django.contrib.auth.hashers.PBKDF2SHA1PasswordHasher',
    'django.contrib.auth.hashers.Argon2PasswordHasher',
]

from datetime import timedelta
from rest_framework.settings import api_settings

REST_KNOX = {
  'SECURE_HASH_ALGORITHM': 'cryptography.hazmat.primitives.hashes.SHA512',
  'AUTH_TOKEN_CHARACTER_LENGTH': 64,
  'TOKEN_TTL': timedelta(hours=10),
  'USER_SERIALIZER': 'knox.serializers.UserSerializer',
  'TOKEN_LIMIT_PER_USER': None,
  'AUTO_REFRESH': False,
  'EXPIRY_DATETIME_FORMAT': api_settings.DATETIME_FORMAT,
}

from django.urls import path, include
from .views import UserListAPI, UserDetailAPI, LoginAPI, RegisterAPI, PasswordChangeAPI
from knox import views as knox_views

urlpatterns = [
    path('logout/', knox_views.LogoutView.as_view(), name = "knox_logout"),
    path('users/', UserListAPI.as_view()),
    path('users/<str:username>/', UserDetailAPI.as_view()),
    path('login/', LoginAPI.as_view()),
    path('register/', RegisterAPI.as_view()),
    path('', include('django.contrib.auth.urls')),
    ]

url.py

from django.shortcuts import render
from rest_framework import viewsets, generics
from rest_framework.authtoken.models import Token
from rest_framework.response import Response
from knox.auth import TokenAuthentication
from knox.models import AuthToken
from rest_framework.permissions import IsAuthenticated, AllowAny
from .models import UserProfile
from .serializers import UserSerializer, LoginSerializer, KnoxSerializer, RegisterSerializer
from django.contrib.auth import views, decorators
from django.contrib.auth.decorators import user_passes_test

class UserListAPI(generics.ListAPIView):

    authentication_classes = (TokenAuthentication,)
    permission_classes = (AllowAny,)
    queryset = UserProfile.objects.all()
    serializer_class = UserSerializer


class UserDetailAPI(generics.RetrieveAPIView):

    authentication_classes = (TokenAuthentication,)
    permission_classes = (AllowAny,)
    queryset = UserProfile.objects.all()
    serializer_class = UserSerializer
    lookup_field = 'username'


class LoginAPI(generics.GenericAPIView):

  serializer_class = LoginSerializer

  def post(self, request, *args, **kwargs):

    serializer = self.get_serializer(data=request.data)
    serializer.is_valid(raise_exception=True)
    user = serializer.validated_data
    token = AuthToken.objects.create(user)[1]
    return Response({
      "user": UserSerializer(user, context=self.get_serializer_context()).data,
      "token": token
    })


class RegisterAPI(generics.GenericAPIView):

  serializer_class = RegisterSerializer
  queryset = UserProfile.objects.all()

  def post(self, request, *args, **kwargs):
    serializer = self.get_serializer(data=request.data)
    serializer.is_valid(raise_exception=True)
    user = serializer.save()
    return Response({
      "user": UserSerializer(user, context=self.get_serializer_context()).data,
      "token": AuthToken.objects.create(user)[1]
    })

import os
from decouple import config
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = config('SECRET_KEY')

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'rest_framework',
    'knox',
    'rest_framework.authtoken',
    'accounts',
    'rest_auth',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'Book_Lib_Project.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'Book_Lib_Project.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}


# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': ('knox.auth.TokenAuthentication',),
    'DATETIME_FORMAT': ("%m/%d/%Y %H:%M:%S",),


    'DEFAULT_PERMISSION_CLASSES':(
        'rest_framework.permissions.AllowAny',),
}


AUTHENTICATION_BACKENDS = [
      "django.contrib.auth.backends.ModelBackend",
#      #"accounts.backends.EmailAuthenticationBackend",
  ]

PASSWORD_HASHERS = [
    'django.contrib.auth.hashers.BCryptSHA256PasswordHasher',
    'django.contrib.auth.hashers.PBKDF2PasswordHasher',
    'django.contrib.auth.hashers.PBKDF2SHA1PasswordHasher',
    'django.contrib.auth.hashers.Argon2PasswordHasher',
]

from datetime import timedelta
from rest_framework.settings import api_settings

REST_KNOX = {
  'SECURE_HASH_ALGORITHM': 'cryptography.hazmat.primitives.hashes.SHA512',
  'AUTH_TOKEN_CHARACTER_LENGTH': 64,
  'TOKEN_TTL': timedelta(hours=10),
  'USER_SERIALIZER': 'knox.serializers.UserSerializer',
  'TOKEN_LIMIT_PER_USER': None,
  'AUTO_REFRESH': False,
  'EXPIRY_DATETIME_FORMAT': api_settings.DATETIME_FORMAT,
}

from django.urls import path, include
from .views import UserListAPI, UserDetailAPI, LoginAPI, RegisterAPI, PasswordChangeAPI
from knox import views as knox_views

urlpatterns = [
    path('logout/', knox_views.LogoutView.as_view(), name = "knox_logout"),
    path('users/', UserListAPI.as_view()),
    path('users/<str:username>/', UserDetailAPI.as_view()),
    path('login/', LoginAPI.as_view()),
    path('register/', RegisterAPI.as_view()),
    path('', include('django.contrib.auth.urls')),
    ]

从django.url导入路径，包括
from.views导入UserListAPI、UserDetailAPI、LoginAPI、RegisterAPI、PasswordChangeAPI
从knox导入视图作为knox_视图
URL模式=[
路径（'logout/'，knox\u views.LogoutView.as\u view（），name=“knox\u logout”），
路径（'users/'，UserListAPI.as_view（）），
路径（'users/'，UserDetailAPI.as_view（）），
路径（'login/'，LoginAPI.as_view（）），
路径（'register/'，RegisterAPI.as_view（）），
路径（“”，包括（'django.contrib.auth.url'），
]

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import axios from 'axios';

axios.defaults.withCredentials = true
axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'

axios.interceptors.request.use(request => {
    console.log(request.headers);
    // Edit request config
    return request;
}, error => {
    console.log(error);
    return Promise.reject(error);
});

axios.interceptors.response.use(response => {
    console.log(response);
    // Edit response config
    return response;
}, error => {
    console.log(error);
    return Promise.reject(error);
});

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

import React, {Component} from 'react';
//import ReactDOM from 'react-dom';
import { withCookies } from 'react-cookie';
import './ChangePassword.css';
import Axios from 'axios'


class ChangePassword extends Component {

    state = {
        credentials: {
            old_password: '',
            new_password1: '',
            new_password2: '',
        },
        token: this.props.cookies.get('usertoken'),
    }

    inputChanged = event => {
        let cred = this.state.credentials;
        cred[event.target.name] = event.target.value;
        this.setState({credentials: cred});
    }

    pressedEnter = event => {
         if (event.key === 'Enter') {
                this.changePassword();
        }
    }

    changePassword = event => {

            Axios.post('http://127.0.0.1:8000/accounts/password_change/', this.state.credentials, {headers: {
                'Authorization': `Token ${this.state.token}`
            }})
            .then(res => {
                    console.log(res);
                    window.location.href = "/";
            })
            .catch( error => console.log(error)) 
    }


    render() {
        return (
            <div className="Login">
            <form onSubmit={this.changePassword}>
                <label>Old Password</label>
                <input type="text" name="old_password" value={this.state.credentials.email} onChange={this.inputChanged} onKeyPress={this.pressedEnter}/><br/>

                <label>New Password</label>
                <input type="password" name="new_password1" value={this.state.credentials.password} onChange={this.inputChanged} onKeyPress={this.pressedEnter}/><br/>
                <label>Confirm New Password</label>
                <input type="password" name="new_password2" value={this.state.credentials.password} onChange={this.inputChanged} onKeyPress={this.pressedEnter}/><br/>

                <input type="submit" value="Change" data-test="submit" />
            </form>
      </div>
        )
    }
}

export default withCookies(ChangePassword);

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“axios”导入axios；
axios.defaults.withCredentials=true
axios.defaults.baseURL='0https://jsonplaceholder.typicode.com';
post['Content-Type']='application/json'；
axios.defaults.xsrfCookieName='csrftoken'
axios.defaults.xsrfHeaderName='X-CSRFToken'
axios.interceptors.request.use（request=>{
log（request.headers）；
//编辑请求配置
返回请求；
}，错误=>{
console.log（错误）；
返回承诺。拒绝（错误）；
});
axios.interceptors.response.use（response=>{
控制台日志（响应）；
//编辑响应配置
返回响应；
}，错误=>{
console.log（错误）；
返回承诺。拒绝（错误）；
});
ReactDOM.render（，document.getElementById（'root'））；
serviceWorker.unregister（）；

ChangePassword.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import axios from 'axios';

axios.defaults.withCredentials = true
axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'

axios.interceptors.request.use(request => {
    console.log(request.headers);
    // Edit request config
    return request;
}, error => {
    console.log(error);
    return Promise.reject(error);
});

axios.interceptors.response.use(response => {
    console.log(response);
    // Edit response config
    return response;
}, error => {
    console.log(error);
    return Promise.reject(error);
});

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

import React, {Component} from 'react';
//import ReactDOM from 'react-dom';
import { withCookies } from 'react-cookie';
import './ChangePassword.css';
import Axios from 'axios'


class ChangePassword extends Component {

    state = {
        credentials: {
            old_password: '',
            new_password1: '',
            new_password2: '',
        },
        token: this.props.cookies.get('usertoken'),
    }

    inputChanged = event => {
        let cred = this.state.credentials;
        cred[event.target.name] = event.target.value;
        this.setState({credentials: cred});
    }

    pressedEnter = event => {
         if (event.key === 'Enter') {
                this.changePassword();
        }
    }

    changePassword = event => {

            Axios.post('http://127.0.0.1:8000/accounts/password_change/', this.state.credentials, {headers: {
                'Authorization': `Token ${this.state.token}`
            }})
            .then(res => {
                    console.log(res);
                    window.location.href = "/";
            })
            .catch( error => console.log(error)) 
    }


    render() {
        return (
            <div className="Login">
            <form onSubmit={this.changePassword}>
                <label>Old Password</label>
                <input type="text" name="old_password" value={this.state.credentials.email} onChange={this.inputChanged} onKeyPress={this.pressedEnter}/><br/>

                <label>New Password</label>
                <input type="password" name="new_password1" value={this.state.credentials.password} onChange={this.inputChanged} onKeyPress={this.pressedEnter}/><br/>
                <label>Confirm New Password</label>
                <input type="password" name="new_password2" value={this.state.credentials.password} onChange={this.inputChanged} onKeyPress={this.pressedEnter}/><br/>

                <input type="submit" value="Change" data-test="submit" />
            </form>
      </div>
        )
    }
}

export default withCookies(ChangePassword);

import React，{Component}来自'React'；
//从“react dom”导入react dom；
从“react cookie”导入{WithCookie}；
导入“./ChangePassword.css”；
从“Axios”导入Axios
类ChangePassword扩展组件{
状态={
证书：{
旧密码：“”，
新密码1:“”，
新密码2:“”，
},
token:this.props.cookies.get（'usertoken'），
}
inputChanged=事件=>{
让cred=this.state.credentials；
cred[event.target.name]=event.target.value；
this.setState（{credentials:cred}）；
}
pressedEnter=事件=>{
如果（event.key=='Enter'）{
此参数为.changePassword（）；
}
}
changePassword=事件=>{
轴心柱http://127.0.0.1:8000/accounts/password_change/“，this.state.credentials，{headers:{
'Authorization'：`Token${this.state.Token}`
}})
。然后（res=>{
控制台日志（res）；
window.location.href=“/”；
})
.catch（错误=>console.log（错误））
}
render（）{
返回(
旧密码


新密码


确认新密码


)
}
}
使用cookies导出默认值（更改密码）；

我解决了这个问题，如果有人遇到同样的问题，请看这里

首先，由于中给出的限制，我需要将域用作而不是（请检查名为domain的部分）。此外，还需要对setting.py文件进行一些更改

将以下信息添加到my settings.py文件中

CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:3000',
)

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_EXPOSE_HEADERS = (
    'Access-Control-Allow-Origin: http://127.0.0.1:3000',
)

将index.js中的axios配置更改为

axios.defaults.withCredentials = true
axios.defaults.baseURL = 'http://127.0.0.1:8000/';

axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'x-csrftoken'

为登录页面发布帖子的正确方法如下：

    Axios.post('http://127.0.0.1:8000/accounts/login/', this.state.credentials).then(res => {
                console.log(res);
                this.props.cookies.set('usertoken', res.data.token);    
// Used token based authentication. A token is returned from backend in JSON format.
            }).catch( error => console.log(error))