Django Angular Cors无法与Post一起工作

Question

我的Angular4应用程序(在http://127.0.0.1:4200开发服务器上运行(应该在网络上访问Django REST后端。后端在我的控制之下，并且仅通过HTTPS(运行Apache(将请求隧道隧道隧道隧道隧道隧道隧道隧道隧道划带到在内部端口上运行的Gunicorn Server(。假设这是https://example.com/。出于历史原因，使用会话记录用户是完成的，因为我希望用户在登录后也能够使用Django的admin界面。工作流如下：

：

• 用户打开http://127.0.0.1:4200，我对https://example.com/REST/is_logged_in执行get请求，该请求在用户尚未通过会话登录时返回403，否则为200。在前一种情况下，用户被重定向到https://example.com/login/，由Django的模板引擎渲染，允许用户登录。登录后，将用户重定向到http://127.0.0.1:4200
• 单击我的Angular UI中的某个按钮时，会执行发布请求。即使前飞行选项请求请求明确列出允许操作的帖子，该帖子请求也会失败。

这是我在django中的CORS配置：

NG_APP_ABSOLUTE_URL = 'http://127.0.0.1:4200'
# adapt Django's to Angular's presumed XSRF cookie/header names
CSRF_COOKIE_NAME = "XSRF-TOKEN"
CSRF_HEADER_NAME = "HTTP_X_XSRF_TOKEN"
CORS_ORIGIN_WHITELIST = (
    urlparse(NG_APP_ABSOLUTE_URL).netloc
)
CSRF_TRUSTED_ORIGINS = (
    urlparse(NG_APP_ABSOLUTE_URL).netloc
)
CORS_ALLOW_HEADERS = default_headers + (
    'x-xsrf-token',
)
CORS_ALLOW_CREDENTIALS = True

这是Chrome报告的(成功，200(首先静止的请求，以检查用户是否已在响应中(成功完成后(登录：

Access-Control-Allow-Credentials:true Access-Control-Allow-Origin:http://127.0.0.1:4200 Allow:GET, HEAD, OPTIONS Connection:close Content-Type:application/json Date:Wed, 26 Apr 2017 15:09:26 GMT Server:gunicorn/19.6.0 Set-Cookie:XSRF-TOKEN=...; expires=Wed, 25-Apr-2018 15:09:26 GMT; Max-Age=31449600; Path=/ Transfer-Encoding:chunked Vary:Accept,Cookie,Origin X-Frame-Options:SAMEORIGIN

相应的请求有以下内容：

Cookie:sessionid=...; XSRF-TOKEN=... Host:example.com Origin:http://127.0.0.1:4200 Referer:http://127.0.0.1:4200/

现在，解决实际问题：

前飞行请求：

Request URL:https://example.com/REST/change_user_data/
Request Method:OPTIONS
Status Code:200 OK
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:example.com
Origin:http://127.0.0.1:4200
Referer:http://127.0.0.1:4200/dashboard/account

前飞行响应：

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:accept, accept-encoding, authorization, content-type, dnt, origin, user-agent, x-csrftoken, x-requested-with, x-xsrf-token
Access-Control-Allow-Methods:DELETE, GET, OPTIONS, PATCH, POST, PUT
Access-Control-Allow-Origin:http://127.0.0.1:4200
Access-Control-Max-Age:86400
Connection:close
Content-Length:0
Content-Type:text/html; charset=utf-8
Date:Wed, 26 Apr 2017 15:36:56 GMT
Server:gunicorn/19.6.0
Vary:Origin
X-Frame-Options:SAMEORIGIN

现在我的失败(403(发布请求：

Accept:application/json
Accept-Encoding:gzip, deflate, br
Accept-Language:de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Content-Length:60
Content-Type:application/json
Cookie:sessionid=...; XSRF-TOKEN=...
Host:example.com
Origin:http://127.0.0.1:4200
Referer:http://127.0.0.1:4200/dashboard/account

响应标头：

HTTP/1.1 403 Forbidden
Date: Wed, 26 Apr 2017 15:36:56 GMT
Server: gunicorn/19.6.0
Vary: Accept,Cookie,Origin
X-Frame-Options: SAMEORIGIN
Content-Type: application/json
Access-Control-Allow-Credentials: true
Allow: POST, OPTIONS
Access-Control-Allow-Origin: http://127.0.0.1:4200
Set-Cookie: XSRF-TOKEN=...; expires=Wed, 25-Apr-2018 15:36:56 GMT; Max-Age=31449600; Path=/
Connection: close
Transfer-Encoding: chunked

为什么这个请求不起作用？对我来说没什么意义！

最好的问候！

Answer 1

我遇到了同样的问题，试图从我的Angular CLI(端口4200(将邮政请求发送到Django(端口8000(。我认为这是Django的问题，所以我安装了CORS软件包，但是"问题"是浏览器(实际上不是问题，这是安全问题，请参见此处(。无论如何，我解决了一个问题，为我的角CLI添加了一个代理规则，如下所示：

• 首先，而不是将我的请求发送到 http：//localhost：8000/api/em> ...是将它们发送到/api/em>(即在端口4200运行的服务器(。
• 然后，我在我的角度项目中添加了一个文件，称为" proxy.conf.json"，其中包含以下内容：

{
  "/api": {
    "target": "http://localhost:8000",
    "secure": false
  }
}

• 最后，使用标志" -proxy-config"运行NG服务器： ng serve --watch --proxy-config proxy.conf.json

所有API请求将发送到端口4200，Angular将内部将它们重定向到Django，以避免CORS问题。请注意，这仅适用于开发，并且在构建应用程序代码并将其添加为Django服务器的静态代码时不会使用。

最后，使用此解决方案，我不再需要CORS的Python模块，因此您可以将其删除。