uni-app在H5跨域问题小程序不需要跨域导致的兼容问题解决

应用场景:很多时候我们开发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,
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。