解决uniapp h5 本地代理实现跨域访问及如何配置开发环境
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
如何解决uniapp H5本地代理实现跨域访问?
1.第一种解决方法:
直接创建一个vue.config.js文件,并在里面配置devServer,直接上代码,重启跑项目
亲测有效
// vue.config.js
module.exports = {
transpileDependencies: ['uview-ui'],
devServer: {
proxy: {
'/api': {
target: 'https://rivtrust.jz-xxx.xyz/',
changeOrigin: true,
pathRewrite: {
'^/apih5': ''
}
}
},
}
}
2.第二种解决方法:
在src目录下找到mainfest.json文件,修改该文件,点击“源码视图”看到h5
注意:如果打开“源码视图”后并没有找到关于h5的配置,这时可以点击“h5配置”,随便修改下配置,比如设置页面标题;再去打开“源码视图”后就会出现关于h5的配置。
// manifest.json
{
"h5": {
"devServer": {
"proxy": {
'/api': {
target: 'https://rivtrust.jz-xxx.xyz/',
changeOrigin: true,
pathRewrite: {
'^/apih5': ''
}
}
}
}
}
}
接口调用时这么写:
注意⚠️以上两种解决方法不能同时使用;第二种方案会覆盖第一种解决方法
3.还有一种无需配置:
使用HBuilder X 内置浏览器,不存在跨域问题,推荐使用