uni-app系列(五):uniapp 引入 axios 注意:withCredentials允许获取cookie 和后端配置的跨域不可同时使用


?摘要

今天分享下 —— uni-app系列(一):安装开发工具 的一些基本知识,欢迎关注!

欢迎阅读,总结系列:野蛮生长的 uni-app 学习之路

?安装 axios

    首先检查是否安装 npm 工具:工具 –> 插件安装
    uni-app系列(五):uniapp 引入 axios 注意:withCredentials允许获取cookie 和后端配置的跨域不可同时使用

    检查是否安装 npm,如果没有可以去看我的这篇文章:windows安装node.js用npm安装vue

    安装后在当前目录下打开内置终端:(和前几步一样检查插件安装与否)
    uni-app系列(五):uniapp 引入 axios 注意:withCredentials允许获取cookie 和后端配置的跨域不可同时使用

    在终端输入:npm install axios 安装 axios
    uni-app系列(五):uniapp 引入 axios 注意:withCredentials允许获取cookie 和后端配置的跨域不可同时使用

    安装后如下所示:(node_modules 出现 axios)
    uni-app系列(五):uniapp 引入 axios 注意:withCredentials允许获取cookie 和后端配置的跨域不可同时使用

?uniapp 项目配置 axios

    创建 utils 文件按自己所需创建 .js 文件 uni-app系列(五):uniapp 引入 axios 注意:withCredentials允许获取cookie 和后端配置的跨域不可同时使用
    引入 axios
import Vue from 'vue'
import axios from 'axios'

    配置如下:(注意:withCredentials允许获取cookie 和后端配置的跨域不可同时使用,会报错哦提醒你了!)
import Vue from 'vue'
import axios from 'axios'

// create an axios instance
const service = axios.create({
baseURL: 'https://www.yongjiachen.top/jccrm', // url = base url + request url
//withCredentials: true, // send cookies when cross-domain requests 注意:withCredentials和后端配置的cross跨域不可同时使用
timeout: 6000, // request timeout
crossDomain: true
})

// request拦截器,在请求之前做一些处理
service.interceptors.request.use(
config => {
// if (store.state.token) {
// // 给请求头添加user-token
// config.headers["user-token"] = store.state.token;
// }
console.log('请求拦截成功')
return config;
},
error => {
console.log(error); // for debug
return Promise.reject(error);
}
);

//配置成功后的拦截器
service.interceptors.response.use(res => {
if (res.data.status== 200) {
return res.data
} else {
return Promise.reject(res.data.msg);
}
}, error => {
if (error.response.status) {
switch (error.response.status) {
case 401:
break;
default:
break;
}
}
return Promise.reject(error)
})

// 在main.js中放入这段自定义适配器的代码,就可以实现uniapp的app和小程序开发中能使用axios进行跨域网络请求,并支持携带cookie
axios.defaults.adapter = function(config) {
return new Promise((resolve, reject) => {
console.log(config)
var settle = require('axios/lib/core/settle');
var buildURL = require('axios/lib/helpers/buildURL');
uni.request({
method: config.method.toUpperCase(),
url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
header: config.headers,
data: config.data,
dataType: config.dataType,
responseType: config.responseType,
sslVerify: config.sslVerify,
complete: function complete(response) {
console.log("执行完成:",response)
response = {
data: response.data,
status: response.statusCode,
errMsg: response.errMsg,
header: response.header,
config: config
};

settle(resolve, reject, response);
}
})
})
}

export default service

    在项目根目录的 main.js 配置引入全局 axiosuni-app系列(五):uniapp 引入 axios 注意:withCredentials允许获取cookie 和后端配置的跨域不可同时使用
// 引入封装后的axios
import axios from './utils/request/request.js'
/**
* 给Vue函数添加一个原型属性$axios 指向Axios
* 这样做的好处是在vue实例或组件中不用再去重复引用Axios 直接用this.$axios就能执行axios 方法了
* 在.vue中使用,this.$axios.get
* @param {Object} config
*/
Vue.prototype.$axios = axios

    愉快的使用 axiosuni-app系列(五):uniapp 引入 axios 注意:withCredentials允许获取cookie 和后端配置的跨域不可同时使用
    效果图:uni-app系列(五):uniapp 引入 axios 注意:withCredentials允许获取cookie 和后端配置的跨域不可同时使用

最后感谢大家耐心观看完毕,原创不易,六个点赞收藏是您对我最大的鼓励!

?最后

更多参考精彩博文请看这里:《陈永佳的博客》

喜欢博主的小伙伴可以加个关注、点个赞哦,持续更新嘿嘿!

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

uni-app系列(五):uniapp 引入 axios 注意:withCredentials允许获取cookie 和后端配置的跨域不可同时使用

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » uni-app系列(五):uniapp 引入 axios 注意:withCredentials允许获取cookie 和后端配置的跨域不可同时使用
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏