前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Django 解决跨域访问API失败问题

Django 解决跨域访问API失败问题

作者头像
授客
发布2020-09-22 10:58:02
2.6K0
发布2020-09-22 10:58:02
举报
文章被收录于专栏:授客的专栏

解决跨域访问API失败问题

实践环境

Win 10

Python 3.5.4

Django-2.0.13.tar.gz

官方下载地址:

https://www.djangoproject.com/download/2.0.13/tarball/

vue 2.5.2

django-cors-headers-3.0.2.tar.gz

下载地址:

https://pypi.org/project/django-cors-headers/#files

https://files.pythonhosted.org/packages/6b/17/bdd7e2610d5c5b36194524926e4b00abc7113f968d4614c4ff98f2d74737/django-cors-headers-3.0.2.tar.gz

问题描述

vue组件中访问django服务端api时,提示以下问题

Access to XMLHttpRequest at 'http://localhost:8000/api/v1/sprints/details' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因分析:跨域访问导致

解决方法

安装django-cores-headers

pip install django-cors-headers

或者通过下载安装包的方式安装

项目settings.py配置

找到INSTALLED_APPS,添加 corsheaders

INSTALLED_APPS = [

...略

'corsheaders'

]

找到MIDDLEWARE,添加 corsheaders.middleware.CorsMiddleware

MIDDLEWARE = [ # Or MIDDLEWARE_CLASSES on Django < 1.10

...略

'corsheaders.middleware.CorsMiddleware',

'django.middleware.common.CommonMiddleware',

...略

]

注意:

1、CorsMiddleware尽可能放在上方,特别是会生成response的中间之前,比如 CommonMiddleware 、WhiteNoiseMiddleware,否则不能给这些response添加CORS请求头。

2、如果正在使用CORS_REPLACE_HTTPS_REFERER,django-cors-headers,将其放在CsrfViewMiddleware 之前。

在MIDDLEWARE变量之后添加以下代码

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_ALLOW_ALL = True

必要时还可以再添加CORS_ALLOW_HEADERS变量,设置允许的请求头,如下

CORS_ALLOW_HEADERS = ('authorization', 'Content-Disposition')

也可以写成如下,允许所有请起头(不过实践时发现,有时候似乎不起作用,需要指定具体的请求头)

CORS_ALLOW_HEADERS = ('*')

实践发现,给POST请求添加X-CSRFTOKEN请求头时,需要在CORS_ALLOW_HEADERS中设置x-csrftoken请求头,如下:

CORS_ALLOW_HEADERS = ('x-csrftoken', 'authorization', 'content-type')

不然会报类似以下错误:

Access to XMLHttpRequest at 'http://localhost:8000/api/v1/sys-user/userinfo' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

参考链接

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档