首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >不使用POST的Django+Angular CORS

不使用POST的Django+Angular CORS
EN

Stack Overflow用户
提问于 2017-04-26 15:42:48
回答 1查看 1.3K关注 0票数 2

我的Angular4应用程序(运行在http://127.0.0.1:4200开发服务器上)应该访问web上的django REST后端。后端在我的控制之下,并且只能通过HTTPS (运行Apache将请求隧道到运行在内部端口上的gunicorn服务器)。假设这是https://example.com/。由于历史原因,登录用户是使用会话完成的,因为我希望用户在登录后也能够使用Django的管理界面。工作流程如下:

  • 用户打开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
  • 当单击我的角度UI中的某个按钮时,将执行POST请求。此post请求在403中失败,即使飞行前选项请求显式地将POST列出为允许的操作。

以下是Django中的CORS配置:

代码语言:javascript
运行
复制
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)第一个REST GET请求,以检查用户在响应中是否登录(成功之后):

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/

现在,我们来谈谈实际的问题:

飞行前请求:

代码语言:javascript
运行
复制
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

飞行前反应:

代码语言:javascript
运行
复制
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)帖子请求:

代码语言:javascript
运行
复制
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

响应头:

代码语言:javascript
运行
复制
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

为什么这个要求不起作用?对我来说没什么意义!

诚挚的问候!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-09 09:22:59

我也遇到了同样的问题,试图从我的角度CLI (端口4200)发送一个POST请求到Django (端口8000)。我认为这是Django的问题,所以我安装了cors软件包,但是“问题”在于浏览器(实际上不是问题,而是安全问题,参见这里)。无论如何,我解决了为我的角度CLI添加代理规则的问题,如下所示:

  • 首先,不要把我的请求发送给http://localhost:8000/api/.将它们发送到/api/ (即运行在端口4200的我的ng服务器)。
  • 然后,我在我的角度项目中添加了一个名为"proxy.conf.json“的文件,其内容如下:
代码语言:javascript
运行
复制
{
  "/api": {
    "target": "http://localhost:8000",
    "secure": false
  }
}
  • 最后,使用标志"--proxy-config":ng serve --watch --proxy-config proxy.conf.json运行ng服务器。

所有的API请求都将被发送到端口4200,角将内部重定向到Django,从而避免了CORS问题。请注意,这只对开发有效,在构建应用程序代码并将其添加为Django服务器的静态代码时不会使用。

最后,使用此解决方案,我不再需要用于cors的python模块,这样您就可以删除它。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43638846

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档