• axios发送post请求,服务端无法正常获取参数(比如:node服务器无法通过req.body获取参数)解决方案


    前端通过 axios 方式请求nodejis后端数据的过程中,如果是 get 请求,服务器端能够通过 req.query 获取前端传递的参数再向数据库获取数据;但是如果是 post 请求,服务器却不能通过 req.body 获取参数。

    解决办法:

    前端 引用 “qs” ,然后在发送 axios 请求时,使用 qs.stringify()将数据包裹起来。

    import qs from 'qs'
    点击并拖拽以移动
    import $http from '../../ajax/http.js'
    
    $http({
              method: "POST",
              url: "/blog/check_login_status/",
              data: qs.stringify(values)
            })
            .then(res => {
                localStorage['token'] = 1;
                this.props.history.replace("/");
            })
            .catch(err => {
                notification["error"]({
                    message: '错误图示',
                    description:
                      '用户名或密码错误',
                });
    });

    http.js: 

    import axios from 'axios'
    
    let _this = this;
    
    let HTTP = axios.create({
      baseURL:'/',
      timeout: 10000,        //单位是ms,请求超过这个时间就取消,即请求超时
      responseType: 'json',  //后端返回的数据类型
      // header:{  //自定义请求头
         'custom-header':'xiao',  //Request Headers里面就多了一个custom-header:xiao,后端可以拿到这个数据
      //   'content-type':'application/x-www-form-urlencoded'  //设置这个,那么经过transformRequest处理之后的数据格式就变为了  miaov=ketang&username=leo,只支持POST请求方式
      // },
      params: {  //查询字符串,传给后端的数据,不管是get还是post请求,这条数据都会附在url后面,发送给后端
        //TOKEN: localStorage['TOKEN']
      },
      transformResponse: [function (data) {   //数组格式,用于处理返回的数据格式,data是后端发送回来的数据
        data.abc = 'miaov'  //对返回数据做进一步处理,请求此类地址的返回值都拥有abc这个属性,值是miaov
        return data;  //需要return出来
      }]
    });
    
    //添加一个请求拦截器:请求之前的拦截
    HTTP.interceptors.request.use(function (config) {  //config就是自定义请求的配置信息,即HTTP的配置参数
      //在发送请求之前做某事
      //console.log("拦截请求之前提交的数据:");
      //console.log(config)
      //这里可以对配置项config做处理,取消某些配置或增加
      config.headers.TOKEN = localStorage['TOKEN'];
      return config;  //return config请求会继续进行,否则请求就被拦截了
    }, function (error) {
      //请求错误时做些事
      return Promise.reject(error);
    });
    
    //添加一个请求拦截器:请求之后的拦截
    HTTP.interceptors.response.use(res => {
      // 响应失败
      // if (!res.data.success) {
      //   Toast(res.data.msg);
      // }
    
      /**
      * refresh_token过期
      * 1、清空本地token
      * 2、刷新页面
      */
     //console.log("拦截器拦截的数据:");
     //console.log(res);
    
      // if (res.data.code === '004-1') {
      //   //localStorage.setItem('TOKEN', '')
      //   localStorage['TOKEN'] = '';
      //   window.location.reload();
      // }
    
      return res.data;
    }, error => {
      _this.$notify.error({
        title: "错误",
        message: error.message,
        duration: 0
      });
    })
    
    export default HTTP;
  • 相关阅读:
    打破 Serverless 落地边界,阿里云 SAE 发布 5 大新特性
    2021云栖大会|东方通正式加入阿里云云原生合作伙伴计划,强强联手共创国产数字化转型新风向!
    跨越行业绊脚石,阿里云函数计算发布 7 大技术突破
    OpenYurt 深度解读|开启边缘设备的云原生管理能力
    云原生网关开源、自研、商业化三位一体战略背后的思考
    云栖发布|企业级互联网架构全新升级 ,助力数字创新
    云栖收官:想跟远道而来的朋友们说
    阿里云容器服务多项重磅发布:高效智能、安全无界的新一代平台
    云栖掠影|回首开源十年,RocketMQ 焕发新生
    云栖大会第二天:ACK Anywhere 来了
  • 原文地址:https://www.cnblogs.com/samve/p/14232676.html
Copyright © 2020-2023  润新知