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

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

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',
]
  1. 允许所有源访问

    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编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:

  1. 全新的界面设计 ,将会带来全新的写作体验;
  2. 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
  3. 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
  4. 全新的 KaTe
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
在Node.js中使用axios请求接口以及拦截器使用方法如下: 首先,需要安装axios模块: ``` npm install axios ``` 然后,在代码中引入axios模块: ```js const axios = require('axios'); ``` 接下来,可以使用axios发送GET、POST等请求: ```js axios.get('http://example.com/api') .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); axios.post('http://example.com/api', {data: 'hello'}) .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); ``` 当然,axios还支持一些其他的请求方法,比如PUT、DELETE等。 接下来,我们可以使用axios拦截器请求响应进行处理。例如,我们可以在请求头中添加token: ```js axios.interceptors.request.use(config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => { return Promise.reject(error); }); ``` 在上面的代码中,我们使用axios的interceptors.request.use方法,它可以在请求被发送出去之前对其进行拦截处理。在这个例子中,我们将localStorage中存储的token添加到请求头中的Authorization字段中。 我们还可以使用axios的interceptors.response.use方法对响应进行处理。例如,我们可以检查响应状态码是否为401,如果是,则跳转到登录页面: ```js axios.interceptors.response.use(response => { return response; }, error => { if (error.response.status === 401) { window.location.href = '/login'; } return Promise.reject(error); }); ``` 在上面的代码中,我们使用axios的interceptors.response.use方法,它可以在响应被接收之前对其进行拦截处理。在这个例子中,我们检查了响应状态码是否为401,并且在这种情况下跳转到登录页面。 以上就是在Node.js中使用axios请求接口及拦截器使用方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十年丿之后

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值