使用React fetch调用Dango REST，获得403响应

Question

我正在托管一个React应用程序(http://localhost:3000/)，希望使用fetch调用从Django REST应用程序(http://127.0.0.1:8000/)对用户进行身份验证。我正在使用django-cors-headers解决CORS问题，但仍然收到403 Forbidden (CSRF cookie not set.): /api-auth/login/错误/

我的用户是django.contrib.auth.models.AbstractUser的直接子类，我正在使用rest_framework.urls LoginView登录该用户。如果我从内置的Django模板(http://127.0.0.1:8000/api-auth/login/)调用它，我可以成功登录，但是当我使用fetch从React应用程序发布时，我得到了一个403错误。

我使用django-core-headers进行CORS挑战，但它似乎没有将Cookie与响应一起发送回来。

我尝试过使用Postman通过POSTing连接到http://127.0.0.1:8000/api-auth/login/，也收到了一个403错误。

urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('', include('users.urls')),
    path('admin/', admin.site.urls),
    path('api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

Settings.py的一部分：

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

    'rest_framework',
    'corsheaders',

    'users',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    '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',
]

AUTH_USER_MODEL = 'users.User'
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.BasicAuthentication',
        'rest_framework.authentication.SessionAuthentication',
    )
}

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
SESSION_COOKIE_SAMESITE = None

CSRF_TRUSTED_ORIGINS = [
    'localhost:3000',
    '127.0.0.1:3000',
]

我正在使用fetch调用接口。

handleLogin (e) {
    e.preventDefault();
    fetch('http://127.0.0.1:8000/api-auth/login/', {
      method: 'POST',
      credentials: 'include',
      headers: {
        'X-CSRFToken': Cookies.get('csrftoken'),
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(this.state)
    })
      .then(response => {
        console.log(response.body)
        return response
      })
    }

当从http://127.0.0.1:8000/调用DRF时，可以正确地对用户进行身份验证，所以我相信DRF-app可以像预期的那样工作。有人能帮我解决React应用程序和DRF之间的连接吗？

Answer 1

您的react应用程序必须使用合适的端点向服务器请求csrftoken，并存储此cookie。

例如：

# Django view.py
def get_csrf(request):
    return HttpResponse("{0}".format(csrf.get_token(request)), content_type="text/plain")

# Django urls.py
url(r'^api/get_csrf/?$', get_csrf, name="get_csrf"),

JS代码：

$.get( "api/get_csrf/", function(data) {
  Cookies.set('csrftoken', data);
});