uniapp使用H5调试时跨域问题解决
用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
最后的最后，提醒一下，每次修改完配置，一定要记得关闭重新编译一下。
到此这篇关于uniapp使用H5调试时跨域问题解决的文章就介绍到这了,更多相关uniapp H5跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了js+css实现换肤效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了JavaScript canvas实现代码雨效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
遍历子节点子元素的方法有很多，本例使用js来实现，另附示例代码及属性方法，需要的朋友可以参考下2014-08-08
这篇文章主要给大家介绍了关于JavaScript前后端JSON使用方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
在项目开发中经常会遇到表单提交功能，今天小编抽空给大家分享JS实现提交表单前的数字及邮箱校检功能，需要的朋友参考下吧2017-11-11
Taro，京东凹凸实验室出品的适配多端的一个框架，这篇文章主要介绍了使用taro开发微信小程序遇到的坑总结,需要的朋友可以参考下2019-04-04
javascript设计模式 – 组合模式原理与应用实例分析
这篇文章主要介绍了javascript设计模式 – 组合模式,结合实例形式分析了javascript组合模式相关概念、原理、应用场景及相关使用注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要为大家详细介绍了swiper实现导航滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
如果你有玩过《王者荣耀》、《阴阳师》 等手游，一定注意到过它的启动动画、皮肤立绘卡片等场景，经常采用静态底图加局部液态流动效果的简单动画，本文将利用JavaScript实现这一效果，需要的可以参考一下2022-08-08
在javascript中，null＞=0 为真，null==0却为假，null的值详解
这篇文章主要介绍了在javascript中，null＞=0 为真，null==0却为假，null的值详解的相关资料,需要的朋友可以参考下2017-02-02
最新评论