"在django中,请求的资源上没有'Access-Control-Allow-Origin'标头"

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,但我收到错误"No'Access-Control-Allow-Origin'标头出现在请求的资源上.来源' http://www.local:54521 '因此不是允许访问".这个问题的解决方案是什么？此外,我已按照" https://gist.github.com/strogonoff/1369619 "中的步骤操作,但问题仍然存在.

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标题

Answer 4

我遇到了同样的问题。

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

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

希望这可以帮助！（这是我的第一个回答，请放轻松）

Answer 5

如果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 6

如果后端使用django，需要做以下6件事：

• 确保您在 virtualenv 中，然后“pip install django-cors-headers”

• 在 settings.py 的 INSTALLED-APPS 部分添加以下内容：'corsheaders'，

• 添加下面的settings.py的中间件部分： '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 以斜杠结尾。