AngularJS的Django CORS API [英] Django CORS API from AngularJS

问题描述

我在Django中启用了"django-cors" CORS:

I have enabled CORS in Django, with "django-cors":

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

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

After following the installation steps here, I have set the following:

CORS_ORIGIN_ALLOW_ALL = False

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

django应用程序在 http://locahost:3000

The django app runs on http://locahost:3000

我的前端是Angular应用程序，它在"http:/localhost:8000"上运行，并且我进行了以下更改以与django应用程序通信.

My frontend is an Angular app, which runs on "http:/localhost:8000", and I have done the following changes to communicate with the django app.

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

[将Restangular用于资源API]

[Using Restangular for resource APIs]

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

When I call the GET API, the "OPTIONS" pre-flight call happens, and I get the following error:

XMLHttpRequest无法加载 http://localhost:3000/users .凭据标志为"true"，但"Access-Control-Allow-Credentials"标头为".允许使用凭据必须为"true".因此，不允许访问' http://localhost:8000 '.

XMLHttpRequest cannot load http://localhost:3000/users. Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'http://localhost:8000' is therefore not allowed access.

通过查看文档，我了解到我需要设置服务器希望作为调用一部分的某些标头.因此，我添加了以下内容: RestangularProvider.setDefaultHeaders({"x-requested-with":'XMLHttpRequest'});

Looking at the documentation, I understood that I needed to set certain headers which the server would expect as a part of the call. So, I added the following: RestangularProvider.setDefaultHeaders({"x-requested-with" : 'XMLHttpRequest'});

但是，在进行此更改时，我遇到另一个错误，无法解决: XMLHttpRequest无法加载 http://localhost:3000/users .飞行前响应无效(重定向)

However, on making this change, I am getting another error, which I am unable to resolve: XMLHttpRequest cannot load http://localhost:3000/users. Response for preflight is invalid (redirect)

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

Note: The request/response headers are as follows:

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命名不正确.

I finally managed to resolve the problem. The problem was because of improper API naming.

我的同事将API命名如下:

My colleague had named the API as follows:

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

当我将其称为"/users"时，由于django的 APPEND_SLASH 设置，它正在永久重定向到"/users/". django文档关于 APPEND_SLASH 的内容是这样的:

And when I would call "/users", then because of django's APPEND_SLASH setting, it was doing a permanent redirect to "/users/". Here's what the django documentation says about APPEND_SLASH:

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

When set to True, if the request URL does not match any of the patterns in the URLconf and it doesn’t end in a slash, an HTTP redirect is issued to the same URL with a slash appended. Note that the redirect may cause any data submitted in a POST request to be lost.

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

The APPEND_SLASH setting is only used if CommonMiddleware is installed.

当然，解决此问题的最简单(也是最好)的方法是通过删除斜线来更新API网址，即

Of course, the simplest (and best) way of resolving this problem, is to update the API url by removing the slash, i.e.

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

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

Then it would match the URL directly, and no redirect will be issued.

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

However, in case someone really wants to keep the trailing slash in the API, then you can still make it work, by adding the following code in AngularJS:

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

但是，不建议您使用上述方法，但是由于它是出于实验目的，因此我还是要与大家分享.

The above is however not recommended, but since it came out of my experiments, I am sharing it anyways.

这篇关于AngularJS的Django CORS API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！