axios的基体请求使用 axios的请求拦截器和响应拦截器的使用 axios结合django的使用_django axios

axios的基本请求使用
一.跨域问题

从网上了解到，跨域问题实际上是一种浏览器的基础安全设置，因为我们访问网站时，可能会自动带上一些本地cookie之类的信息，当用户从一个网站请求另一个网站时（或者是从一个端口/服务请求另一个端口服务时）就会产生跨域问题，总的来说就是不安全，具体可参照csrf漏洞，当你进入一个钓鱼网站，他将你的请求定向到一个正规网站，这样你访问的时候会带上你输入过的cookie，而这个钓鱼网站就可以得到你的cookie信息，从而利用你的身份做一些事情。

一般是后端做跨域的事情：
1.安装

pip install django-cors-headers

INSTALLED_APPS = [
 		...
    'rest_framework',
    'corsheaders',  # 1. 注册 跨域 组件
    'goods',  # 尽量将自己的APP放在下面
]
1
2
3
4
5
6

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',
]
1
2
3
4
5
6
7
8
9
10

3. 允许所有源访问

   CORS_ORIGIN_ALLOW_ALL = True
   1

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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

二 .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);
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2、取消拦截器

    var myInterceptor = axios.interceptor.request.use(function(){
   /*....*/});
    axios.interceptors.request.eject(myInterceptor);
1
2
3

3、 给自定义的axios实例添加拦截器,

 var instance = axios.create();
    instance.interceptors.request.use(function(){
   })
1
2
3

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);
      });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

三.axios结合django的使用
（1）django后端使用一中的例子
（2）前端需要安装，并在main.js中配置

npm install --save axios
1

欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

1. 全新的界面设计 ，将会带来全新的写作体验；
2. 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
3. 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
4. 全新的 KaTe