Question

我的前端和后端解耦，客户端在localhost:3000上运行，后端在localhost:8000上运行。我有csrf和刷新令牌，并且在服务器端将它们设置为cookie。现在，我需要在客户端使用这些cookie。这是我写的React代码：

fetch('http://localhost:8000/api/Acutes/SignIn/', {
      method: 'POST',
      headers: {
      'Content-Type': 'application/json',
       'withCredentials': 'true'
       },
       body: JSON.stringify(values)
       })
       .then(data => data.json())
       .then(data =>{
             console.log(data)
         })
       .catch(error =>{
         console.error(error);
         })

Django设置

CORS_ORIGIN_WHITELIST = [
    "http://localhost:9001",
    "http://localhost:3000"
]

CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'withCredentials'
]

使用此方法时似乎出现的错误如下。

Access to fetch at 'http://localhost:8000/api/Acutes/SignIn/' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field withcredentials is not allowed by Access-Control-Allow-Headers in preflight response.

我应该如何处理此错误并将cookie放入客户端？TIA

Answer 1

我遇到了类似的问题，为了摆脱它，我进行了以下更改- 使用 - pip install django-cors-headers 将 django-cors-headers 包添加到您的项目中将以下内容添加到 settings.py -

CORS_ORIGIN_WHITELIST = ['http://localhost:3000']

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_ALLOW_ALL=True

CSRF_TRUSTED_ORIGINS = ['http://localhost:3000']

MIDDLEWARE = [
           'corsheaders.middleware.CorsMiddleware',
             ....
              ]

INSTALLED_APPS = [
               ....
             'corsheaders',
               .....
                ]

为了获得 csrf 令牌，我添加了一个单独的 api-

from django.middleware.csrf import get_token
def csrf(request):
return JsonResponse({'csrfToken': get_token(request)})

现在在JS代码中你可以得到csrf令牌值如下-

async function getCsrfToken() {
  var csrfToken=getCookie('csrftoken');
  if (csrfToken === null) {
    const response = await fetch(`${API_HOST}/csrf/`, {
      credentials: 'include',
    });
    const data = await response.json();
    csrfToken = data.csrfToken;
  }
  document.cookie = "csrfToken="+csrfToken;
};

希望这能解决您的问题

从React客户端服务器访问在Django后端服务器上设置的cookie

1 个答案: