指向托管Django服务器CORS no'AccessControlAllowOrigin'头的本地React应用程序

Question

我正在本地主机3000上运行我的react应用程序的本地版本，并试图访问heroku上托管的Django服务器上的端点

在每个axios请求上遇到错误：CORS策略已阻止对XMLHttpRequest的访问：不存在“访问控制允许来源”标头

Django服务器的当前设置.py：

ALLOWED_HOSTS=['*']

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'corsheaders',
    'whitenoise.runserver_nostatic',
    'django.contrib.staticfiles',
    'accounts',
    'blog',
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',

    # Whitenoise
    'whitenoise.middleware.WhiteNoiseMiddleware',

    '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',

    # Machina
    #'machina.apps.forum_permission.middleware.ForumPermissionMiddleware',
]

# CORS
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_CREDENTIALS = False

由于我允许所有来源地发出请求，因此似乎应该禁用这种类型的CORS问题。我已经尝试删除除Corsmidlware之外的所有其他中间件，但没有产生任何影响

在这一点上有点困惑，因为根据https://github.com/adamchainz/django-cors-headers，我的配置似乎是正确的

下面是来自我的react应用程序的api调用示例，该调用导致“no‘Access Control Allow Origin’头”

function callCSRFApi(){
  return axios.request({
    method: 'GET',
    url: 'http://example.com/csrf/',
  });
}

需要注意的一点是，我正在访问Django服务器上的端点，即使它没有配置为Django_rest api

我还尝试设置自定义中间件，该中间件应始终定义Access Control Allow Origin，但仍然收到缺少标头的消息：

class CorsMiddleware(object):
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response = self.get_response(request)
        if (request.method == "OPTIONS"  and "HTTP_ACCESS_CONTROL_REQUEST_METHOD" in request.META):
            response = http.HttpResponse()
            response["Content-Length"] = "0"
            response["Access-Control-Max-Age"] = 86400
        response["Access-Control-Allow-Origin"] = "*"
        response["Access-Control-Allow-Methods"] = "DELETE, GET, OPTIONS, PATCH, POST, PUT"
        response["Access-Control-Allow-Headers"] = "accept, accept-encoding, authorization, content-type, dnt, origin, user-agent, x-csrftoken, x-requested-with"
        return response

我的想法是，问题可能是因为我们没有将Django服务器配置为Django_rest应用程序，或者Django具有无法从本地主机访问的逻辑

注:

• 在读到其他人在缓存方面有问题后，我在一个匿名窗口中进行了测试
• 已尝试还原到django cors标头的早期版本
• 已在没有CORS的情况下尝试\u允许\u凭据=False
• 在本地主机的不同端口上运行django服务器和react应用程序时，获取工作请求
• Python 3.7、Django 3.0.7、Django cors headers 3.5.0、React 17.0.1、axios 0.21.0

Answer 1

我自己在axios和CSRF方面遇到了一些问题，我喜欢只使用本机的FetchAPI。此代码适用于Django和corsheaders：

export async function authenticateUser() {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': Cookies.get('csrftoken')
    },
    credentials: 'include',
  });
  return response.json()
}

Answer 2

尝试在Django设置中设置CORS_ALLOW_CREDENTIALS = True，在axios配置中设置{ withCredentials: true }