Django+vue跨域问题解决的详细步骤

翻译过来即是：从源地址 http://127.0.0.1 :3000 发起的到 http://127.0.0.1 :8000/api/test/ 的XMLHttpRequest访问违反了同源策略：因为在请求头中没有Access-Control-Allow-Origin的值

前端解决跨域

参考博客 

既然跨域是因为不同源，那我同源不就完事儿了，但是后端请求地址不可能改变，所以可以在前端和后端的中间加一层代理，前端通过代理访问后端。

在Vue-cli工具中已经提供了代理的功能，只需要配置即可。

在根目录下的config/index.js文件中有如下配置项：

proxyTable: {
 '/': { 
 target: 'http://127.0.0.1:8000/',
 changeOrigin: true,
 pathRewrite: {
 '^/api': ''
 }
 }
 },

1. '/'表示以'/'(即所有的路径)开头的路径均需要代理，
2. target:代理的目标服务器地址（即后端服务器地址）为 ' http://127.0.0.1 :8000/',
3. changeOrigin，为修改源：修改请求中的源地址
4. pathReWrite：URL路径重写，对于以'/api'开头的路径将'/api'替换为''

后端解决跨域

参考博客 

后端出于安全考虑，也会对于跨域有限制，解决方法如下：

安装django-cors-headers

$ pip install django-cors-headers

配置settings.py文件

INSTALLED_APPS = [
 ...
 'corsheaders'，
 ...
 ] 

MIDDLEWARE_CLASSES = (
 ...
 'corsheaders.middleware.CorsMiddleware',
 'django.middleware.common.CommonMiddleware', # 注意顺序
 ...
)
#跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
 '*'
)

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',
)