uniapp使用H5调试时跨域问题解决
作者:冰凉冰凉 时间:2024-05-09 10:37:11
用uniapp开发APP时,为了开发方便,经常是H5开发好,然后再弄APP的兼容性问题。所以可能会涉及到跨域,此时也可以让后端同学帮忙,但是求人不如自己搞,所以分享一套跨域方法,其实也是webpack开发vue跨域的方法。废话不啰嗦,上代码。两个地方都可以配置效果一样取其一即可,第一个是vue.config.js,manifest.json源码
module.exports = {
// 配置路径别名
configureWebpack: {
devServer: {
disableHostCheck: true,
proxy: {
//配置跨域
'/api': {
target: "http://www.xxx.com/",//转发的目标地址
secure : false,
changOrigin: true,
// pathRewrite: { //是否重写 如果重写的话,本地/api/a1/b1 就回变成/a1/b1
// '^/api': '' //意思就是把api这个替换成空 ''
// }
}
}
}
}
}
manifest.json源码视图直接上截 图方便理解,再次解释一下pathRewrite,很多人会因为这个导致无法使用
另外一旦在本地配置了,这个跨域代理,老是切换开发环境要变地址,官方也支持开发环境。
const baseURL = process.env.NODE_ENV === 'development' ? "/api/" : "https://www.正式地址.com/api/";
环境具体介绍
看到这里其实有的读者还是不太明白具体咋搞,或者按照这个代码写了还是不能成功使用,再用一些例子帮助你明白具体做了什么操作。
假设本地端口为localhost:9000,服务器测试地址为http://www.xxx.com,直接请求报跨域错误。
有两个请求的接口为http://www.xxx.com/api/test/t1,http://www.xxx.com/api/test/t2。
一般会封装地址,例如function getT1()地址为"text/t1",function getT2()地址为"text/t2"。
这时候api/就可以提取出来作为baseUrl,前面的代理,就可以配置/api 匹配api这个字段,把这个字段作为条件,
一旦匹配这个字段,就把这个字段的请求地址换成target定义的地址。
现在接口改了有两个请求的接口为http://www.xxx.com/api1/test1/t1,http://www.xxx.com/api2/test2/t2,
都不一样了也没有公共字段了,那我要怎么配置代理呢。这时候就用到pathRewrite,在接口的时候的时候认为的加一个识别标签,然后用重写给他去除后得到实际地址。代码如下
const baseURL = process.env.NODE_ENV === 'development' ? "/devApi/" : "https://www.正式地址.com/api/";//人为的在baseUrl中加入devApi
vue.config.js
module.exports = {
? ? // 配置路径别名
? ? configureWebpack: {
? ? ? ? devServer: {
? ? ? ? ? ? disableHostCheck: true,
? ? ? ? ? ? proxy: {
? ? ? ? ? ? ? ? //配置跨域
? ? ? ? ? ? ? ? '/devApi': {
? ? ? ? ? ? ? ? ? ? target: "http://www.xxx.com/",//转发的目标地址
? ? ? ? ? ? ? ? ? ? secure : false,
? ? ? ? ? ? ? ? ? ? changOrigin: true,
? ? ? ? ? ? ? ? ? ? pathRewrite: {?
? ? ? ? ? ? ? ? ? ? ? ? '^/devApi': '' //意思就是把devApi这个替换成空 ''
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
}
本地请求的localhost:9000/devApi/api1/test1/t1 经过代理变成 http://www.xxx.com/api1/test1/t1
最后的最后,提醒一下,每次修改完配置,一定要记得关闭重新编译一下。
附上webpack对proxy的配置说明
来源:https://juejin.cn/post/7000943533456621576
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
解决Windows10不能安装Oracle 11g的问题(附详细安装教程)
![](https://img.aspxhome.com/file/2023/3/63723_0s.jpg)
python基于paramiko将文件上传到服务器代码实现
python爬虫用mongodb的理由
如何真正的了解python装饰器
PHP对战ASP:这还值得讨论吗
php让json_encode不自动转义斜杠“/”的方法
mysql 5.7.16 winx64安装配置方法图文教程
![](https://img.aspxhome.com/file/2023/5/105225_0s.jpg)
前端面试之输入npm run后执行原理
![](https://img.aspxhome.com/file/2023/0/129340_0s.jpg)
用python读写excel的方法
使用MySQL内建复制功能
Python 日期的转换及计算的具体使用详解
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
![](https://img.aspxhome.com/file/2023/6/70086_0s.png)
vue实现带过渡效果的下拉菜单功能
![](https://img.aspxhome.com/file/2023/6/126476_0s.jpg)
python初学定义函数
![](https://img.aspxhome.com/file/2023/5/115045_0s.png)
使用python实现回文数的四种方法小结
Python进阶之如何快速将变量插入有序数组
pandas使用fillna函数填充NaN值的代码实例
Python FastAPI 多参数传递的示例详解
![](https://img.aspxhome.com/file/2023/9/131639_0s.jpg)
Python伪随机数模块random详解
详解Django之admin组件的使用和源码剖析
![](https://img.aspxhome.com/file/2023/9/90949_0s.png)