Django 解决跨域访问API失败问题
解决跨域访问API失败问题
By:授客 QQ:103355122
实践环境
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
问题描述
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
作者:授客
微信/QQ:1033553122
全国软件测试QQ交流群:7156436
Git地址:https://gitee.com/ishouke
友情提示:限于时间仓促,文中可能存在错误,欢迎指正、评论!
作者五行缺钱,如果觉得文章对您有帮助,请扫描下边的二维码打赏作者,金额随意,您的支持将是我继续创作的源动力,打赏后如有任何疑问,请联系我!!!
微信打赏
支付宝打赏 全国软件测试交流QQ群
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库