angularjs - 来自 AngularJS 的 Django CORS API

标签 angularjs django cors django-cors-headers

我已经在 Django 中启用了 CORS,使用“django-cors”:

https://github.com/ottoyiu/django-cors-headers

按照此处的安装步骤进行操作后,我进行了以下设置:

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    'http://localhost:8000'
)

django 应用程序运行于 http://locahost:3000

我的前端是一个 Angular 应用程序,它在“http:/localhost:8000”上运行,我已进行以下更改以与 django 应用程序进行通信。

RestangularProvider.setBaseUrl('http://localhost:3000/');

[使用 Restangular 获取资源 API]

当我调用 GET API 时,会发生“OPTIONS”飞行前调用,并且出现以下错误:

XMLHttpRequest 无法加载 http://localhost:3000/users 。凭据标志为“true”,但“Access-Control-Allow-Credentials” header 为“”。它必须是“真实的”才能允许凭证。来源'http://localhost:8000 ' 因此不允许访问。

查看文档,我了解到我需要设置服务器期望作为调用一部分的某些 header 。所以,我添加了以下内容: RestangularProvider.setDefaultHeaders({"x-requested-with": 'XMLHttpRequest'});

但是,在进行此更改时,我收到另一个错误,但无法解决: XMLHttpRequest 无法加载 http://localhost:3000/users 。预检响应无效(重定向)

注意:请求/响应 header 如下:

General:
Remote Address:127.0.0.1:3000
Request URL:http://localhost:3000/users
Request Method:OPTIONS
Status Code:301 MOVED PERMANENTLY

Response Headers
Access-Control-Allow-Headers:x-requested-with, content-type, accept, origin, authorization, x-csrftoken, user-agent, accept-encoding
Access-Control-Allow-Methods:GET, POST, PUT, PATCH, DELETE, OPTIONS
Access-Control-Allow-Origin:http://localhost:8000
Access-Control-Max-Age:86400
Content-Type:text/html; charset=utf-8
Date:Thu, 17 Dec 2015 11:10:16 GMT
Location:http://localhost:3000/users/
Server:WSGIServer/0.1 Python/2.7.10
X-Frame-Options:SAMEORIGIN

Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, x-requested-with
Access-Control-Request-Method:GET
Cache-Control:no-cache
Connection:keep-alive
Host:localhost:3000
Origin:http://localhost:8000
Pragma:no-cache
Referer:http://localhost:8000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36

最佳答案

我终于成功解决了这个问题。该问题是由于 API 命名不当造成的。

我的同事将该 API 命名如下:

url(r'^users/', views.user_details)

当我调用“/users”时,由于 django 的 APPEND_SLASH 设置,它会永久重定向到“/users/”。以下是 django 文档中关于 APPEND_SLASH 的说明:

当设置为 True 时,如果请求 URL 与 URLconf 中的任何模式都不匹配并且不以斜杠结尾,则会向同一 URL 发出 HTTP 重定向,并附加斜杠。请注意,重定向可能会导致 POST 请求中提交的任何数据丢失。

仅当 CommonMiddleware 时才使用 APPEND_SLASH 设置 已安装。

当然,解决这个问题最简单(也是最好)的方法是通过删除斜杠来更新 API url,即

url(r'^users', views.user_details)

然后它将直接匹配 URL,并且不会发出重定向。

但是,如果有人真的想在 API 中保留尾部斜杠,那么您仍然可以通过在 AngularJS 中添加以下代码来使其工作:

resourceProvider.defaults.stripTrailingSlashes = false;
RestangularProvider.setRequestSuffix('/'); 

虽然不推荐上述内容,但由于它是我的实验结果,所以我还是分享它。

关于angularjs - 来自 AngularJS 的 Django CORS API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34333323/

相关文章:

javascript - 解决 Protractor 中的 cucumber promise

javascript - 强制元素具有相同的边界(单独的内联 block / float :left; clear:right doesn't work)

mysql - Django 条件计数

tomcat - Jersey 支持 CORS 吗?

firefox - Heroku + CDN Cloudfront + 字体 - Firefox 错误

javascript - 为什么 ng-click 需要通过 $index 进行跟踪才能在嵌套的 ng-repeat 中触发

javascript - Angularjs 过滤器删除自定义属性,例如 "tooltip"

javascript - CORS 没有 Access-Control-Allow-Origin header

javascript - 避免长 Angular $http 查询超时

ajax - Django 和 AJAX : Delete Multiple Items wth Check Boxes