您现在的位置是:首页 > 名人名句

UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)

作者:纳雷武时间:2024-04-07 17:35:33分类:名人名句

简介  文章浏览阅读5.5k次,点赞12次,收藏12次。UniApp 运行到浏览器的时候,接口会跨域报错,这里通过两种方式解决,第一:修改Uniapp自带的manifest.json 源码视图并进行配置h5设置。第二:在项目根目录新建vue.config.js并配置代

点击全文阅读

UniApp 运行到浏览器的时候,接口会跨域报错,这里通过两种方式解决,第一:修改Uniapp自带的manifest.json 源码视图并进行配置h5设置。第二:在项目根目录新建vue.config.js并配置代理。 二选一即可。

修改或调整配置文件后,推荐重新运行,以防不生效。

配置完成后,请求接口显示 Please enable JavaScript to continue. 的话,可以试试重启编辑器(尤其是 HBuilderX),再重新运行项目,如果还是不行就另外查查解决方案吧,网上有很多。

一、方式一:修改 manifest.json 文件

在 UniApp 也有类似配置的地方:找到 manifest.json -》源码视图,添加 h5 配置项:

"h5" : {    "devServer" : {        "disableHostCheck" : true,        "proxy" : {            "/api" : {                "target" : "http://www.dzm.com",                "changeOrigin" : true,                "secure" : false,                "ws": false,                "pathRewrite" : {                    "^/api" : ""                }            }        }    }}

在这里插入图片描述

二、方式二:添加 vue.config.js 文件

UniApp 会识别 vue.config.js 文件,但是 manifest.json 的优先级
要高于 vue.config.js 文件,所以看需求选择一个配置即可。

像 vue 开发一样,手动创建一个 vue.config.js 文件,然后添加上代理,vue.config.js 只能创建在项目的根目录,不然会无法识别到。

module.exports = {    devServer: {        disableHostCheck: true,        proxy: {            '/api': {                target: 'http://www.dzm.com',                changeOrigin: true,                secure: false,                ws: false,                pathRewrite: {                    '^/api': ''                }            }        }    }}

三、使用

简单使用

// 请求对象uni.request({    url: '/api' + '/mobile/user/userinfo',    method: 'GET',    data: {},    header: {        'X-Token': uni.getStorageSync('token')    },    success: (res) => {        // 请求成功        console.log(res)    },    fail: (err) => {        // 请求失败        console.log(err)    }})

封装成请求对象 request.js

// 接口域名// #ifdef H5const BaseHost = '/api'// #endif// #ifndef H5const BaseHost = 'http://www.dzm.com'// #endif// 请求封装export default function ({    // 请求域名    host = BaseHost,    // 请求地址    url,    // 请求方式    method,    // 请求数据    data = {},    // 请求头    header = {}}) {    // 官方请求文档(可查阅传参)https://uniapp.dcloud.io/api/request/request.html    // 转为 Promise 结构    return new Promise((resolve, reject) => {        // 请求对象        uni.request({            url: host + url,            method,            data,            header: Object.assign({                // 默认请求头                'X-Token': uni.getStorageSync('token')            }, header),            success: (res) => {                // 可以在这里进行成功的公共处理                resolve(res)            },            fail: (err) => {                // 可以在这里进行失败的公共处理                reject(err)            }        })    })}

点击全文阅读

郑重声明:

本站所有活动均为互联网所得,如有侵权请联系本站删除处理

上一篇:vue3监听路由的变化

下一篇:返回列表

我来说两句