前端解决uniapp接口跨域的方法

前端解决uniapp接口跨域的方法

项目构建的 manifest.json 的源码试图找到下面的 h5模块下加入 配置代理:

"h5": {
    "router": {
        "mode": "hash", // 路由模式
        "base": "ssp"
    },
    "safearea": {
        "background": "#f00",
        "bottom": {
            "offset": "auto"
        }
    },
    "devServer": {
        "https": false, // 是否启用 https 协议,默认false
        "port": 8080, // 本地端口号
        "disableHostCheck": true, // 禁用 Host 检查,默认false
        "proxy": {
            // 代理配置
            "/zhghssp": {
                //本地   http://192.168.0.122:8081
                "target": "https://saas.51hlife. cn/zhghssp", // 目标接口域名
                "changeOrigin": true, // 是否跨域
                "secure": true, // 是否支持https协议的代理
                "pathRewrite": {
                    "^/zhghssp": ""
                } // 这个一定要加,意思就是把你项目中一dev开头的接口自动替换为 target + pathRewrite第二个参数来进行数据的请求(pathRewrite没有第二个参数的话直接为target)
            }
        }
    },
}

下面是自己封装的一个请求头方法:

function request(methods, url, data, headers) {
    if (!headers) {
        let token = uni.getStorageSync('token')  //项目中需要用到的token
        headers = {
            'Content-Type': 'application/json',
            'token': token
        }
    }
    return new Promise((resolve, reject) => {
        uni.request({
            url: '/zhghssp' + url,   //这个很重要拼接之前把前面跨域定义的url拼接上面
            method: methods,
            timeout: 60000,
            data: data,
            header: headers,
            success: (res) => {
                resolve(res.data)
            },
            fail: (error) => {
                reject(error)
            }
        })
    })
}

function get(url, data, headers) {
    return request('GET', url, data, headers)
}

function post(url, data, headers) {
    return request('POST', url, data, headers)
}

function put(url, data, headers) {
    return request('PUT', url, data, headers)
}

function Delete(url, data, headers) {
    return request('DELETE', url, data, headers)
}


module.exports = {
    get: get,
    post: post,
    put: put,
    Delete: Delete
}

到此,前端就解决uniapp接口跨域问题。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 前端解决uniapp接口跨域的方法

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们