vue-cli3中axios如何跨域请求以及axios封装
2023-09-11 14:19:39 时间
1、
vue.config.js中配置如下
module.exports = {
// 选项...
// devtool: 'eval-source-map',//开发调试
devServer: {
port: 8089,
proxy:{
'/apis': {//代理api
target: "http://999.138.2.133:8080",//服务器api地址
changeOrigin: true,//是否跨域
pathRewrite: {//重写路径
"^/apis": ''
}
}
}
},
configureWebpack: {//引入jquery
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
},
}
在页面中请求的方法
this.axios.get('/apis/ithil_j/activity/movie_annual2017').then(res => {
console.log(res.data)
}, res => {
console.info('调用失败');
})
一个较全面的axios封装
import axios from 'axios'; import Qs from 'qs';//用于表单提交数据格式 //以下是新加 import { MessageBox, Message } from 'element-ui'; import store from '@/store'; import { getToken } from '@/utils/auth'; // import { SSL_OP_ALLOW_UNSAFE_LEGACY_RENEGOTIATION } from 'constants'; let env = process.env.NODE_ENV; let root = ''; let loading; if (env === 'development') { console.log("api"); } else if (env === 'production') { console.log("pro"); root = ''; } else { throw '请检查process.env.NODE_ENV的值,是否符合这些值之一:development,production'; } Date.prototype.format = function (fmt) { var o = { "y+": this.getFullYear(), "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "H+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds() //秒 }; if (!fmt) { fmt = 'yyyy-MM-dd HH:mm:ss'; } if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) { if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); } } return fmt; } // 自定义判断元素类型JS function toType(obj) { return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase(); } // 参数过滤函数 function filterNull(o) { for (var key in o) { if (o[key] === null) { delete o[key]; } if (toType(o[key]) === 'string') { o[key] = o[key].trim(); } else if (toType(o[key]) === 'date') { o[key] = (o[key].format()); } else if (toType(o[key]) === 'object') { o[key] = filterNull(o[key]); } else if (toType(o[key]) === 'array') { o[key] = filterNull(o[key]); } } return o; } function apiAxios(method, url, params, success, failure, authFail) { console.log('url:' + url); if (params) { params = filterNull(params); } var base = ""; if (url.indexOf(".html") != -1) { base = ""; } else { base = root; } //请求拦截(必须放在配置axios前面) axios.interceptors.request.use(config=>{ console.log("请求拦截"); config.headers['X-Token'] = 'token';//假数据 return config; },error=>{ // 请求错误回调 console.log(error) // for debug }); //响应拦截(必须放在配置axios前面) axios.interceptors.response.use(response=>{ console.log("响应拦截") return response; },error=>{ console.log(error); }) //配置axios axios({ headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, transformRequest: [function(data) {//在请求之前对data传参进行格式转换 loading= layer.load(2, {//请求未成功时出现loading页 ,3代表一中效果 shade: [0.1,'#fff'] //0.1透明度的白色背景 }); data = Qs.stringify(data); return data; }], method: method, url: url, data: method === 'POST' || method === 'PUT' || method === 'DELETE' ? params : null, params: method === 'GET' ? params : null, baseURL: base, withCredentials: true,//跨域请求时发送cookie timeout: 5000, //过期时间 }).then(function (res) { if (res.status >= 200 && res.status <= 210 ) { if (success) { success(res); layer.close(loading);//关闭loading效果 } } else { //不走 // window.alert('error: ' + JSON.stringify(res.data)); } }).catch(function (err) { console.log(err) if(failure){ failure(); } // let res = err.response; // if (err && res) { // console.log(res.status); // if (res.status == 504) { // // alert.eduToast("服务器连接失败!请检查您的网络或服务器!!",2000); // return; // } else if (res.status == 401) { // console.log('------------------:status'+res.status); // console.log('------------------:authFail'+authFail); // } // if (failure) { // failure(res); // } else { // // alert.eduToast(res.data,2000); // } // } else { // if(authFail){ // // localStorage.setItem('login', ''); // }else{ // console.log(err); // } // } }); } // 返回在vue模板中的调用接口 export default { get: function (url, params, success, failure,authFail) { return apiAxios('GET', url, params, success, failure,authFail); }, post: function (url, params, success, failure) { return apiAxios('POST', url, params, success, failure); }, put: function (url, params, success, failure) { return apiAxios('PUT', url, params, success, failure); }, delete: function (url, params, success, failure) { return apiAxios('DELETE', url, params, success, failure); }, initHeader: function () { console.log('------------------:initHeader'); } };
相关文章
- Vue笔记:封装Echarts
- Vue+ElementUI项目使用webpack输出MPA
- vue版本冲突解决办法
- vue过滤动画
- 在vue中使用jsx语法
- [Vue] Get up and running with vue-router
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- electron-vue开发爬坑指南
- 基于Vue 和 webpack的项目实现
- vue_axios请求封装、异常拦截统一处理
- [Vue + TS] Create your own Decorators in Vue with TypeScript
- [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
- [Nuxt] Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js
- vue.js3: 拖动排序(vue@3.2.37 / vuedraggable@4.1.0)
- vue中mixins和组件的区别和用法
- vue - 指令创建 vue工程
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- cordova+vue 项目打包成Android(apk)应用
- 155:vue+openlayers 设置地图的反转色、复古色、灰度图、原始图
- 137:vue+openlayers 绘制矩形,利用createBox来处理
- 070:vue+openlayers 引用封装js测量距离和面积(示例代码)
- webpack与vue-cli的关系
- 【vue】vue中如何实现组件封装、组件化开发及组件间传参_08
- Vue:第一个vue-cli项目
- Vue学习笔记——vue-router