Django Rest Framework：XML​​HttpRequest无法加载http://127.0.0.1:8000/xyz/api/abc

Question

解决方案：在网址的末尾添加一个尾部斜杠...

＆＃34; http://127.0.0.1:8000/xyz/api/abc/＆＃34;而不是＆＃34; http://127.0.0.1:8000/xyz/api/abc＆＃34;

...

我已经成功创建了一个Django Rest API，并且能够在本地存储和托管数据。我已经单独构建了一个angularjs1.0应用程序，并尝试通过$ http get request提取数据但是我遇到了这个错误：

XMLHttpRequest cannot load http://127.0.0.1:8000/xyz/api/abc. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://172.20.9.163:8080' is therefore not allowed access.

我试图安装CORS并将其添加到我的INSTALLED_APPS中，但似乎没有任何工作。

这是获取请求：

getABC : function() {
            $http({
                method: 'GET',
                url: 'http://127.0.0.1:8000/xyz/api/abc',
                cache: false
            }).success(function(data) {
                console.log(data)
                callback(data);
            });
        },

在这里查看我的Django settings.py文件：

INSTALLED_APPS = (
    'xyz',
    'corsheaders',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
)

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

)

CORS_ORIGIN_ALLOW_ALL = True

Answer 1

<强> TL; DR

将您的AJAX请求发送到斜杠附加的URL。

<强>解释

在我们讨论之后，看起来罪魁祸首是Django的自动APPEND_SLASH = True，它在启用CommonMiddleware时启用。

这会导致Angular应用程序的AJAX请求首先点击301 Moved Permanently重定向到斜杠附加的URL。但是，corsheaders中间件不会对此响应执行操作，因此浏览器会抱怨缺少Access-Control-Allow-Origin标头。

通过直接请求带斜线的URL并完全绕过301重定向来解决这个问题。

$http({
    method: 'GET',
    url: 'http://127.0.0.1:8000/xyz/api/abc/',  // trailing slash here
    cache: false
}).success(...);

Answer 2

安装django-crops-headers

pip install django-cors-headers

在setting.py中：

MIDDLEWARE = [
             #...
                 'corsheaders.middleware.CorsMiddleware',
                 'django.middleware.common.CommonMiddleware',
             ]
INSTALLED_APPS = [

                'corsheaders',
                 #...
                ]

将CORS_ORIGIN_ALLOW_ALL设置为True

CORS_ORIGIN_ALLOW_ALL = True  # this allows all domains

Or to allow specific domains 

CORS_ORIGIN_WHITELIST = (
'http://example.com',
'http://127.0.0.1:8000',
'http://localhost:8000',
 )

在Ajax调用中（前端）添加标头：

 var get_request = $.ajax({
  type: 'GET',
  "headers": {
          "accept": "application/json",
          "Access-Control-Allow-Origin":"*"
      },
  url: 'http://example.com',
});

如果未解决，则应在请求服务器（http://example.com）中启用核心