标签：axios 封装 请求 进度条 changeOrigin localhost config nprogress

一、二次封装axios、让用户不孤单
import axios from 'axios'//引入axios
import nprogress from 'nprogress'//引入nprogress进度条插件
import 'nprogress/nprogress.css'//引入进度条样式
//import Cookies from 'js-cookie'
//请求前

axios.interceptors.request.use((config)=>{

nprogress.start();//启动进度条
})
//可以在这里做一些拦截的操作
//例如拦截登录者的身份信息，来确定权限
//举例：拦截cookies里的message
//config.headers.Authorization=Cookies.get('message')
return config//必须返回config
})
//请求完成
axios.interceptors.response.use((data)=>{
//关闭进度条
nprogress.done();
return data//同样必须返回data
})
//抛出封装好的axios
export default axios
})

二、vue网络请求
vue脚手架配置代理
配置单个代理
在vue.config.js中添加如下配置
devServer:{
proxy:'http://localhost:5000'
}
优点：配置简单，请求资源时直接发给前端8080即可
缺点：不能配置多个代理，不能灵活的控制请求是否走代理
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先配置前端资源）

配置多个代理
编写vue.config.js配置具体代理规则
module.exports={
devServer:{
proxy:{
'/api1':{
//匹配所有以'/api'开头的请求路径
target:'http://localhost:5000',//代理目标的基本路径
changeOrigin:true,
//把路径的/api1替换为空串
pathRewrite:{'^/api':''},
},
'/api2':{
//匹配所有的以'/api2'开头的请求路径
target:'http://localhost:5001',
changeOrigin:ture,
pathRewrite:{'^/api2':''},
}
}
}
}
changeOrigin 设置为 true 时，服务器收到的请求头中的 host：localhost:5000
changeOrigin 设置为 false 时，服务器收到的请求头中的 host：localhost:8080
changeOrigin 默认为 true

标签：axios,封装,请求,进度条,changeOrigin,localhost,config,nprogress
来源： https://www.cnblogs.com/zmh114712318/p/16440677.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。