應(yīng)用場(chǎng)景:很多時(shí)候我們開(kāi)發(fā)uni-app的時(shí)候枷邪,在H5端總是會(huì)遇到跨域問(wèn)題榛搔,但是小程序這些不需要跨域,導(dǎo)致出現(xiàn)的不兼容問(wèn)題 ,本篇文章完美解決了這些問(wèn)題
H5跨域配置 配置文件:manifest.json
"h5": {
"devServer": {
"port": 8080, //端口號(hào)
"disableHostCheck": true,
"proxy": {
"/api": {
"target": "http://xxx.com/", //目標(biāo)接口域名
"changeOrigin": true, //是否跨域
"secure": false // 設(shè)置支持https協(xié)議的代理
}
}
}
}
本篇文章算是封裝了個(gè)類(lèi)庫(kù) 分別是帶token的請(qǐng)求和不帶token的api請(qǐng)求
其中g(shù)etApp().globalData.baseUrl為全局變量 這個(gè)可以根據(jù)你們的需求自己更改
import token from './token.js'
//api請(qǐng)求 不帶token的
const _api = (url, data = {}, type = 'GET' , header = {}, callback, errorCallback) => {
//如果是h5端 則請(qǐng)求傳過(guò)來(lái)的地址 不帶域名
//#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端 則請(qǐng)求傳過(guò)來(lái)的地址 不帶域名
//#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
//設(shè)置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
}
//銷(xiāo)毀token
const clearToken = () => {
uni.removeStorageSync('_token');
}
export default {
setToken,
getToken,
clearToken,
}