前端解决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 接口跨域问题。

以上关于前端解决uniapp接口跨域的方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。