指向托管 Django 服务器的本地 React 应用程序 CORS 没有“访问控制允许来源”header

Question

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

Error encountered on each axios request: Access to XMLHttpRequest has been blocked by CORS policy: no 'Access-Control-Allow-Origin' header is present

Django 服务器的当前 settings.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 问题。 我尝试删除除 CorsMiddleware 之外的所有其他中间件，但它没有任何区别。

在这一点上有点难过，因为按照https://github.com/adamchainz/django-cors-headers ，我的配置似乎是正确的

这是来自我的反应应用程序的示例 api 调用导致“没有'Access-Control-Allow-Origin'标头”

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

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

我还尝试设置一个自定义中间件，它应该始终定义 Access-Control-Allow-Origin，但仍然收到 header 丢失：

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 具有无法从本地主机访问的逻辑。

笔记：

• 在读到其他人遇到缓存问题后，我在隐身 window 中进行测试
• 尝试恢复到早期版本的 django-cors-headers
• 试过没有 CORS_ALLOW_CREDENTIALS = False
• GET 请求在运行 django 服务器和在 localhost 的不同端口上响应应用程序时工作
• Python 3.7，Django 3.0.7，django-cors-headers 3.5.0，React 17.0.1，Z38C3787939C730B6C17D783

Answer 1

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

Answer 2

我自己在 axios 和 CSRF 方面遇到了一些问题，我喜欢只使用本机 fetch-API。 此代码适用于 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 3

尝试将白名单添加到您的 settings.py

cors

CORS_ALLOWED_ORIGINS = ['http://localhost:3000', ]