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

解决跨域访问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

下载地址：

/d/file/p/20221107/

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.