解决跨域访问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
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
