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

解决跨域访问API失败问题

 

By:授客 QQ103355122

 

实践环境

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  

  

 

posted @ 2020-09-20 22:39  授客  阅读(272)  评论(0编辑  收藏