應(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,
}