实现uniapp的app和小程序开发中能使用axios进行跨域网络请求,并支持携带cookie

1-使用npm install axios;命令安装axios
2-新建一个文件夹再建一个.js后缀文件放axios封装代码
在这里插入图片描述

代码:
import Vue from ‘vue’
import axios from ‘axios’

// create an axios instance
const service = axios.create({
baseURL: ‘https://simplicity.sankuanedu.com’, // 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<=350) {
// 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

图片:
在这里插入图片描述

在这里插入图片描述3-在main.js中放入这段自定义适配器的代码,就可以实现uniapp的app和小程序开发中能使用axios进行跨域网络请求,并支持携带cookie
代码:
import axios from ‘./utils/axios.js’
Vue.prototype.$axios = axios
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);
        }
    })
})

}
图片:
在这里插入图片描述
--------------------------------------------不是本人写的,作者链接找不到了,所以自己备份一份,已测可以实现uniapp的app和小程序开发中能使用axios进行跨域网络请求,并支持携带cookie
**--------------------------------------------

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐