luffy前端配置and跨域
阅读原文时间:2023年07月09日阅读:1

1. 安装axios 命令:npm install axios

main.js内配置并使用

import axios from 'axios'
app.config.globalProperties.$axios = axios
组件内使用方式

const currentInstance = getCurrentInstance()

const {$axios} = currentInstance.appContext.config.globalProperties

2. 安装elementUI
命令:npm i element-plus -S
main.js内使用

import ElementUI from 'element-plus';
import 'element-plus/theme-chalk/index.css';
app.use(ElementUI);

3.安装bootstrap

npm install bootstrap@3 -S
main.js内使用

import 'bootstrap'

_import 'bootstrap/dist/css/bootstrap.min.css'

4.jqurey的使用
index页面src方式引用,这种方式不好,但是搞不定其他的
5. 跨域问题解决
前端_

server:{
proxy:{
'/path':{
// 这块写代理路由的路径
target:'http://127.0.0.1:8000',
ws:true,
changeOrigin:false,// 欺骗目标服务器
rewrite:path=>path.replace(/^\/path/,''), // 重写方法
}
}
}
后端
1.请求头内增加这个选项也可以
res['Access-Control-Allow-Origin']='*'
2.自己写中间件

class AxiosMiddleware(MiddlewareMixin):
def process_response(self, request, response):
response['Access-Control-Allow-Origin'] = '*'
if request.method == 'OPTIONS':
print('捕捉options')
response['Access-Control-Allow-Headers'] = 'Content-Type'
return response
3. 利用第三方插件
pip install django-cors-headers
使用方式 settings
app内配置 'corsheaders'
中间件内配置:'corsheaders.middleware.CorsMiddleware'
settings内配置  CORS_ALLOW_ALL_ORIGINS=True
tips:具体还有什么配置去conf内去找
6. cookies 使用
安装命令:npm install vue-cookies -S
main.js内配置

import vueCookies from 'vue-cookies'
app.config.globalProperties.$cookies=vueCookies