码迷,mamicode.com
首页 > 移动开发 > 详细

vue基础之axios模块化+反向代理

时间:2019-08-31 17:45:45      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:baidu   target   rewrite   function   基础   ade   return   os模块   app   

 

1>如何将axios代码从main.js文件中独立出来(模块化开发类似node.js)?

  .创建axios.js文件

  .在main.js中引入axios.js代码(其他js代码的模块化以此类推)

  

import Axios from ‘./axios/axios‘//引入axios分离文件

 

2>奉上封装的axios.js模块代码

import Vue from "vue";
import axios from ‘axios‘   
import Qs from ‘qs‘  
Vue.prototype.$http = axios.create({
  transformRequest: [function (data) {//调用时自动变成表单数据
      data = Qs.stringify(data);
      return data;
  }],
  headers:{‘Content-Type‘:‘application/x-www-form-urlencoded‘}//默认请求头为表单数据
})

注:因为后台接收的是表单数据而不是json数据,因此将设置将传入的数据统一转化成表单数据;并将axios写入原型方便调用

 

3>在vue组件中发送请求直接  thsi.$http...

.post请求:

this.$http.post("后台接口地址",data).then((res)=>{//data是传给后台的对象
   //..
})
.catch((err)=>{
           
})

 

3>补充:vue反向代理实现前端跨域

.在项目根目录下新建vue.config.js文件写入以下代码

module.exports = {
    devServer: {
        proxy: {
            ‘/api‘: {
                target: ‘后端接口根路径‘,//例如http://www.baidu.com
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                ‘^/api‘: ‘/‘  //调用时用api替代根路径
                }
            }
        }
    }
}

 

.调用例子

this.$http.post("api/login",data).then((res)=>{//模拟访问登录接口,提交登录数据
   //..
})
.catch((err)=>{
           
})

 

vue基础之axios模块化+反向代理

标签:baidu   target   rewrite   function   基础   ade   return   os模块   app   

原文地址:https://www.cnblogs.com/jinchange/p/11439268.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!