Django Rest Framework:XMLHttpRequest 无法加载 http://127.0.0.1:8000/xyz/api/abc
Django Rest Framework: XMLHttpRequest cannot load http://127.0.0.1:8000/xyz/api/abc
解决方案:在 url...
的末尾添加斜杠
"http://127.0.0.1:8000/xyz/api/abc/" instead of "http://127.0.0.1:8000/xyz/api/abc"
.....
我已经成功创建了一个 Django Rest API 并且似乎能够在本地存储和托管数据。我已经单独构建了一个 angularjs1.0 应用程序,并试图通过 $http get 请求提取数据但是我 运行 遇到了这个错误:
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
TL;DR
将您的 AJAX 请求发送给 slash-appended URL。
说明
经过我们的讨论,罪魁祸首似乎是 Django 的自动 APPEND_SLASH = True
,它在 CommonMiddleware
启用时启用。
这会导致来自您的 Angular 应用的 AJAX 请求首先点击 301 Moved Permanently
重定向到 slash-appended URL。但是,corsheaders
中间件不会对此响应采取行动,因此浏览器会抱怨缺少 Access-Control-Allow-Origin
header.
这可以通过直接请求 slash-appended URL 并完全绕过 301 重定向来解决。
$http({
method: 'GET',
url: 'http://127.0.0.1:8000/xyz/api/abc/', // trailing slash here
cache: false
}).success(...);
Install django-crops-headers
pip install django-cors-headers
In setting.py:
MIDDLEWARE = [
#...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
]
INSTALLED_APPS = [
'corsheaders',
#...
]
Set CORS_ORIGIN_ALLOW_ALL is 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',
)
In Ajax call(front end) add headers:
var get_request = $.ajax({
type: 'GET',
"headers": {
"accept": "application/json",
"Access-Control-Allow-Origin":"*"
},
url: 'http://example.com',
});
If it is not solved, You should enable the core in requesting server(http://example.com)
解决方案:在 url...
的末尾添加斜杠"http://127.0.0.1:8000/xyz/api/abc/" instead of "http://127.0.0.1:8000/xyz/api/abc"
.....
我已经成功创建了一个 Django Rest API 并且似乎能够在本地存储和托管数据。我已经单独构建了一个 angularjs1.0 应用程序,并试图通过 $http get 请求提取数据但是我 运行 遇到了这个错误:
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
TL;DR
将您的 AJAX 请求发送给 slash-appended URL。
说明
经过我们的讨论,罪魁祸首似乎是 Django 的自动 APPEND_SLASH = True
,它在 CommonMiddleware
启用时启用。
这会导致来自您的 Angular 应用的 AJAX 请求首先点击 301 Moved Permanently
重定向到 slash-appended URL。但是,corsheaders
中间件不会对此响应采取行动,因此浏览器会抱怨缺少 Access-Control-Allow-Origin
header.
这可以通过直接请求 slash-appended URL 并完全绕过 301 重定向来解决。
$http({
method: 'GET',
url: 'http://127.0.0.1:8000/xyz/api/abc/', // trailing slash here
cache: false
}).success(...);
Install django-crops-headers
pip install django-cors-headers
In setting.py:
MIDDLEWARE = [
#...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
]
INSTALLED_APPS = [
'corsheaders',
#...
]
Set CORS_ORIGIN_ALLOW_ALL is 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',
)
In Ajax call(front end) add headers:
var get_request = $.ajax({
type: 'GET',
"headers": {
"accept": "application/json",
"Access-Control-Allow-Origin":"*"
},
url: 'http://example.com',
});
If it is not solved, You should enable the core in requesting server(http://example.com)