Django 后端配置项

文章目录

• 一、Django 后端跨域配置
• • • • • 注册跨域
        • 开启Cors中间件 关闭Csrf中间件
        • 其他
• 二、Vue2项目
• • 1.注册
  • • • 打开小黑框输入 vue create 项目名
  • 2. 跨域配置
  • • 安装命令: npm install --save axios
    • 在main.js下配置跨域
  • 3. Element-ui配置
  • • 安装命令 npm install --save element-ui
    • 在main.js下配置element-ui
• 其他
• • • 快速生成vue文件 v2 同时 删掉vue文件CSS样式部分的 lang="scss"

---

一、Django 后端跨域配置 注册跨域

INSTALLED_APPS = [

    'corsheaders',     #注册跨域

]

开启Cors中间件 关闭Csrf中间件

MIDDLEWARE = [

    'corsheaders.middleware.CorsMiddleware',     #开启Cors中间件
    # 'django.middleware.csrf.CsrfViewMiddleware',  #关闭Csrf中间件
]

其他

# 允许所有源访问
CORS_ORIGIN_ALLOW_ALL = True
# 跨域白名单  (与允许所有源访问 二选一即可
CORS_ORIGIN_WHITELIST = ('http://127.0.0.1:8080',)
# 允许带着cookie
CORS_ALLOW_CREDENTIALS = True
# 允许请求头
CORS_ALLOW_HEADERS = ('X-Requested-with', 'token', 'Content-Type')
# 允许请求方法
CORS_ALLOW_METHODS = ('GET', 'POST', 'PUT', 'DELETE', 'OPTIONS')

二、Vue2项目 1.注册 打开小黑框输入 vue create 项目名

2. 跨域配置 安装命令: npm install --save axios 在main.js下配置跨域

//发送网络请求 配置axios
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8000'
// 请求携带cookie
axios.defaults.withCredentials = true
// 异步请求 不阻塞 --请求头
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
// 获取本地 token  没有则为空
axios.defaults.headers['token'] = localStorage.getItem('token')||""
//内容类型
axios.defaults.headers.post['Content-Type'] = 'application/json'

Vue.prototype.$axios = axios

3. Element-ui配置 安装命令 npm install --save element-ui 在main.js下配置element-ui

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

---

其他 快速生成vue文件 v2 同时 删掉vue文件CSS样式部分的 lang=“scss”