解决Django与Vue的跨域问题

使用django-cors-headers解決Django和vue跨域问题

利用Django作为后端，Vue作为前端，进行前后端结合（数据交互）时出现跨域问题，本文介绍后端解决跨域问题的方法，配置后无需再对前端Vue进行配置

后端解决跨域方法

1、安装django-cors-headers

pip install django-cors-headers

2、进入项目的settings.py

(1) 导入app

INSTALLED_APPS = [
    ...
    'myApp',
    'corsheaders',    # 解决跨域问题
    ...
]

(2) 添加中间件

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',    # 解决跨域问题，注意与common.CommonMiddleware的顺序
    'django.middleware.common.CommonMiddleware',
    ...
]

(3) 增加跨域忽略

# 增加跨域忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
# 允许所有方法
CORS_ALLOW_METHODS = ('*')
# 允许所有请求头
CORS_ALLOW_HEADERS = ('*')

配置到这里就可以成功解决跨域问题，进行数据交互了，以下是可能会用到的配置

CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8080',
    'localhost:8080', #凡是出现在白名单中的域名，都可以访问后端接口
)
CORS_ALLOW_CREDENTIALS = True  # 指明在跨域访问中，后端是否支持对cookie的操作

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)