项目构建的 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 接口跨域问题。