从 API REST Django 和 Angular 检索数据答案

【问题标题】：Retrieve data from API REST Django and Angular从 API REST Django 和 Angular 检索数据
【发布时间】：2016-01-26 07:31:22
【问题描述】：

我正在尝试从使用 Django 设置的其余 api 中检索 json。

此数据目前仅托管在：http://127.0.0.1:8000/xyz

当我尝试使用检索它时

 $http({
            method: 'GET',
            url: 'http://127.0.0.1:8000/xyz',
 })

我收到一个错误：

XMLHttpRequest 无法加载 http://127.0.0.1:8000/xyz。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'http://127.0.0.1:8080'。

谁能告诉我处理这个问题的方法吗？

谢谢！

这是我的 Django 设置文件夹：

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

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    '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',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware'
)

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_URLS_REGEX = r'^/api.*$'
CORS_ORIGIN_WHITELIST = (
    'mydomain',
    'localhost:3000',
    'http://127.0.0.1:8000/'
)

【问题讨论】：

标签： python angularjs django rest xmlhttprequest

【解决方案1】：

考虑使用 django-cors-headers 让 Django 返回正确的标头。然后，您可以为您的站点创建一个白名单（http://127.0.0.1:8080 用于开发以及您的最终域用于生产）

我在我的设置中使用以下类似设置：

INSTALLED_APPS += ('corsheaders',)
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_URLS_REGEX = r'^/api.*$'
CORS_ORIGIN_WHITELIST = (
    'mydomain',
    'localhost:3000',
)

您可能还需要将以下内容添加到您的 Angular 项目中：

$http.defaults.useXDomain = true;

[更新]

详情请见this blog

【讨论】：

嗨，我相信我已经相应地添加了所有内容，但我仍然遇到同样的错误。我已经添加了 corsheaders 并将 127.0.0.1:8080 添加到我的白名单中，但它似乎不起作用。我添加了 $http.defaults.useXDomain = true;到我的角工厂。我需要以某种方式改变它吗？
在这种情况下，您必须描述更多有关您的设置的信息。例如，您是否在同一域中运行 Angular 应用程序（可能由 django 呈现）？还是作为一个完整的独立设备，在不同的域上运行？查看这篇文章以获得更多可能的解决方案来尝试：qwertylaundry.com/posts/angular-cors-csrf
我想我已经明白了，谢谢！我得到了剩下的，但我不知道把他在第 2 部分末尾描述的“my_endpoint = ensure_csrf_cookie(MyViewset.as_view(...))”放在哪里。你能帮我吗？
我忘了问你。您是否为您的 API 使用 DRF（django-rest-framework）或类似库？如果没有，你应该。它会处理这样的事情。它还允许您使用令牌，在这种情况下，您不需要 CSRF 保护。但是要回答您的问题， ensure_csrf_cookie 是一个装饰器，因此它可以简单地用作您正在实现的 URL 的 url 或视图文件上的任何其他装饰器。但同样，只需获取 DRF 的副本并避免这些细节
我确实在使用 django-rest-framework。你能指点我一份说明清单吗？

【解决方案2】：

除了settings.py的改动，请尝试在你调用的url末尾加一个斜杠

    $http({
                method: 'GET',
-                url: 'http://127.0.0.1:8000/xyz',
+                url: 'http://127.0.0.1:8000/xyz/',
     })

【讨论】：