Question

我是django的新手，并将其用作创建用户的应用程序的后端。在前端，用于发布用户名的代码是：

var xobj = new XMLHttpRequest();
              xobj.overrideMimeType("application/json");
              xobj.open('POST', "http://www.local:8000/create_user/", true);
                xobj.setRequestHeader("Access-Control-Allow-Origin", "*");
              xobj.onreadystatechange = function () {
                  if (xobj.readyState == 4 && xobj.status == "200") {
                      console.log(xobj.responseText);
                  }
            }
              xobj.send(json);

在后端，与url相关联的函数处理json，但我收到错误＆＃34; No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://www.local:54521＆＃39;因此不允许访问＆＃34;。这个问题的解决方案是什么？我也遵循了＆＃34; https://gist.github.com/strogonoff/1369619＆＃34;中的步骤，但问题仍然存在。

Answer 1

这是我在从Restangular发送API请求时从Django Rest Framework获得相同错误时所做的事情。这样做是将CORS（跨源资源共享）标头添加到Django Rest Framework的响应中。没有CORS标头是导致错误的原因。

在Django Project根文件夹（manage.py文件所在的位置）中，执行：

pip install django-cors-headers

我尝试使用virtualenv，但无法让它工作，所以我安装它而没有切换到virtualenv并安装它。

安装后，您必须对django settings.py

进行一些修改

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
)

CORS_ORIGIN_ALLOW_ALL = True

将上述设置为true可以接受所有来源。

参考文献：https://github.com/ottoyiu/django-cors-headers

Answer 2

就我而言，我只是忘了在REST API URL的末尾添加一个尾部斜杠。即我有这个：

http://127.0.0.1:8000/rest-auth/login

而不是：

http://127.0.0.1:8000/rest-auth/login/

Answer 3

您的前端和后端位于不同的端口上，这意味着您的ajax请求受跨域安全保护。

您需要设置后端以接受来自不同来源（或只是不同的端口号）的请求。

尝试阅读CORS，更具体地说是django cors headers

Answer 4

如果django-cors-headers未解决问题，请尝试手动添加Access-Control-Allow-Origin，如下所示：

@api_view(['GET'])
def swanger(request):
  resutl = {'a': 1}
  resp = JsonResponse(resutl)
  resp['Access-Control-Allow-Origin'] = '*'
  return resp

Answer 5

在中间件类中添加以下行

'corsheaders.middleware.CorsPostCsrfMiddleware'

因此整体实施应为：

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'corsheaders.middleware.CorsPostCsrfMiddleware'

    ...
)

CORS_ORIGIN_ALLOW_ALL = True

在下面查看documentaion 以获得更多信息

Answer 6

在我的情况下是localhost：8000，而预期是127.0.0.1 ...在我的浏览器中将localhost更改为127.0.0.1可以达到目的

Answer 7

我遇到了同样的问题。

user3785412 的答案将起作用。但是，由于浏览器缓存，第一次可能无法直接使用。在失去希望之前，尝试使用另一个浏览器或清除缓存。

我在 Django 2 中拥有API服务器，该服务器托管在Heroku上，而 Angular 7 客户端则托管在Firebase上。我按照user3785412在settings.py中进行了所有更改，但仍然无法正常工作，浪费了将近3个小时。然后出现在帖子中，提示缓存可能有问题。以chrome和 voila 打开！

希望这会有所帮助！ （我的第一个答案，请加油）

Answer 8

我在3种情况下都观察到此错误：

URL的结尾不是/。
URL带有斜线，例如//或///。
我的服务器不工作时。但是打开它后，效果很好。

Answer 9

如果将django用于后端，则需要执行以下6件事： -确保您在virtualenv中，然后“ pip install django-cors-headers” -在settings.py的INSTALLED-APPS部分中添加以下内容： 'corsheaders'， -在settings.py的MIDDLEWARE部分中添加以下内容： “ corsheaders.middleware.CorsMiddleware”，和 'django.middleware.common.CommonMiddleware'， -在settings.py的底部添加以下任意一项： 'CORS_ORIGIN_ALLOW_ALL = True'或

CORS_ORIGIN_WHITELIST = [ 'http://localhost:3000'， 'http://127.0.0.1:3000' ] -使用CORS_ORIGIN_WHITELIST时，请使用来自GET或POST请求的前端应用程序的URL。

另一个陷阱是确保指向django的URL以斜杠结尾。

Answer 10

一个老问题，但是我看不到这个解决方案，该解决方案在任何地方都对我有用。因此希望这对某人有帮助。

只有在合作伙伴站点的服务器通过其响应标头允许它的情况下，跨域请求才有可能。

通过在响应上设置以下标头，我可以在没有任何CORS中间件的中在Django中工作：

response["Access-Control-Allow-Origin"] = "requesting_site.com"
response["Access-Control-Allow-Methods"] = "GET"
response["Access-Control-Allow-Headers"] = "requesting_site.com"

StackOverflow上的大多数答案似乎都提到了第一个，但没有提到第二个。我刚刚确认它们都是必需的。您需要根据需要修改框架或请求方法（GET，POST，OPTION）。

p.s。您可以尝试使用"*"而不是"requesting_site.com"进行初始开发，只是为了使其正常工作，但这是允许每个站点访问的安全漏洞。一旦工作，您就只能将其限制在请求的网站上，以确保没有任何格式错误。

Answer 11

我使用的是python 2.7，由于某些原因，我无法更改python版本到第3版，我花了3个小时才找到一个解决方案：

response =  HttpResponse(json.dumps(result), content_type="application/json")
response["Access-Control-Allow-Origin"] = '*'
response["Access-Control-Allow-Methods"] = 'GET,PUT, OPTIONS'
response["Access-Control-Max-Age"] = '1000'
response["Access-Control-Allow-Headers"] = 'X-Requested-With, Content-Type'
return response

“在django中，请求的资源上没有'Access-Control-Allow-Origin'标头”

11 个答案: