应用场景:很多时候我们开发uni-app的时候,在H5端总是会遇到跨域问题,但是小程序这些不需要跨域,导致出现的不兼容问题 ,本篇文章完美解决了这些问题
H5跨域配置 配置文件:manifest.json
"h5": {
"devServer": {
"port": 8080, //端口号
"disableHostCheck": true,
"proxy": {
"/api": {
"target": "http://xxx.com/", //目标接口域名
"changeOrigin": true, //是否跨域
"secure": false // 设置支持https协议的代理
}
}
}
}
本篇文章算是封装了个类库 分别是带token的请求和不带token的api请求
其中getApp().globalData.baseUrl为全局变量 这个可以根据你们的需求自己更改
import token from './token.js'
//api请求 不带token的
const _api = (url, data = {}, type = 'GET' , header = {}, callback, errorCallback) => {
//如果是h5端 则请求传过来的地址 不带域名
//#ifdef H5
uni.request({
method: type,
url: url,
data: data,
header:header,
success: (res) => {
callback && callback(res.data)
},
fail: (res) => {
errorCallback && errorCallback(res)
}
});
//#endif
//如果非h5端 则将地址改成完整带域名的接口地址
//#ifndef H5
uni.request({
method: type,
url: getApp().globalData.baseUrl + url,
data: data,
header:header,
success: (res) => {
callback && callback(res.data)
},
fail: (res) => {
errorCallback && errorCallback(res)
}
});
//#endif
}
const _api_token = (url, data = {}, type = 'GET', header = {}, callback, errorCallback) => {
//获取token
let _token = token.getToken()
header.token = _token
//如果是h5端 则请求传过来的地址 不带域名
//#ifdef H5
uni.request({
method: type,
url: url,
data: data,
header:header,
success: (res) => {
callback && callback(res.data)
},
fail: (res) => {
errorCallback && errorCallback(res)
}
});
//#endif
//如果非h5端 则将地址改成完整带域名的接口地址
//#ifndef H5
uni.request({
method: type,
url: getApp().globalData.baseUrl + url,
data: data,
header:header,
success: (res) => {
callback && callback(res.data)
},
fail: (res) => {
errorCallback && errorCallback(res)
}
});
//#endif
}
export default {
_api,
_api_token
}
token.js
//设置token
const setToken = (token = '') => {
if(!token){
return false
}
uni.setStorageSync('_token', token);
return true
}
//读取token
const getToken = () => {
let _token = uni.getStorageSync('_token');
if(_token){
return _token
}
return false
}
//销毁token
const clearToken = () => {
uni.removeStorageSync('_token');
}
export default {
setToken,
getToken,
clearToken,
}