axios的基本请求使用
一.跨域问题
从网上了解到,跨域问题实际上是一种浏览器的基础安全设置,因为我们访问网站时,可能会自动带上一些本地cookie之类的信息,当用户从一个网站请求另一个网站时(或者是从一个端口/服务请求另一个端口服务时)就会产生跨域问题,总的来说就是不安全,具体可参照csrf漏洞,当你进入一个钓鱼网站,他将你的请求定向到一个正规网站,这样你访问的时候会带上你输入过的cookie,而这个钓鱼网站就可以得到你的cookie信息,从而利用你的身份做一些事情。
一般是后端做跨域的事情:
1.安装
pip install django-cors-headers
INSTALLED_APPS = [
...
'rest_framework',
'corsheaders', # 1. 注册 跨域 组件
'goods', # 尽量将自己的APP放在下面
]
2.在django项目中的settings文件中配置axios跨域请求
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware', # 2. 添加跨域中间件
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware', # 前后端分离中,不再使用csrf验证
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
-
允许所有源访问
CORS_ORIGIN_ALLOW_ALL = True
axios可以请求方法:
// get传参数
axios.get('/user?id=123')
.then(response=> {
console.log(response)
})
.catch(error=> {
console.log(error)
});
// get传参数
axios.get('/getuser', {
params: {
ID: 123
}
}) .then(response=> {
console.log(response)
}) .catch(error=> {
console.log(error)
});
// post传参数
axios.post('/getuser', {
params: {
name: '小明',
age:18
}
}) .then(response=> {
console.log(response)
}) .catch(error=> {
console.log(error)
二 .Axios拦截器-请求拦截和响应拦截
你可以在请求、响应在到达then/catch之前拦截他们
//添加一个请求拦截器
axios.interceptors.request.use(function(config){
//在请求发出之前进行一些操作
return config;
},function(err){
//Do something with request error
return Promise.reject(error);
});
//添加一个响应拦截器
axios.interceptors.response.use(function(res){
//在这里对返回的数据进行处理
return res;
},function(err){
//Do something with response error
return Promise.reject(error);
})
2、取消拦截器
var myInterceptor = axios.interceptor.request.use(function(){
/*....*/});
axios.interceptors.request.eject(myInterceptor);
3、 给自定义的axios实例添加拦截器,
var instance = axios.create();
instance.interceptors.request.use(function(){
})
4、错误处理
axios.get('/user/12345')
.catch(function(error){
if(error.response){
//请求已经发出,但是服务器响应返回的状态吗不在2xx的范围内
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.header);
}else {
//一些错误是在设置请求的时候触发
console.log('Error',error.message);
}
console.log(error.config);
});
三.axios结合django的使用
(1)django后端使用一中的例子
(2)前端需要安装,并在main.js中配置
npm install --save axios
欢迎使用Markdown编辑器
你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。
新的改变
我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:
- 全新的界面设计 ,将会带来全新的写作体验;
- 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
- 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
- 全新的 KaTe