# uniapp踩坑:编译H5解决浏览器跨域问题
~~~
uniapp编译到app是不存在跨域问题的,但是编译到H5就会有跨域问题。记录一下工作中遇到跨域及解决跨域方法
复制代码
~~~
## 方法一: 直接编译Hbuilder内置浏览器,能解决跨域,但是内置浏览器调试没有谷歌爽
## 方法二: 在manifest.json文件中配置跨域,该方法类似vue.config.js中的devServer
### 步骤一
~~~javascript
"h5" : {
"devServer" : {
"disableHostCheck" : true, // 开启可以用自己的域名
"proxy": {
"/api": {
"target": "https://www.test.com",
"changeOrigin" : true,
"secure" : false,
"pathRewrite": { //匹配请求路径里面有 /api 会替换成https://www.test.com
// 举例:/api/api/user => https://www.test.com/api/user
"^/api": ""
}
}
}
}
}
复制代码
~~~
### 步骤二 很重要,很多人配置了步骤一没效果,因为步骤二没配置好
~~~
就是接口请求的时候,域名要改为/api,不能是正式域名,因为pathReweite已经帮你转了
举个栗子
baseUrl = process.env.NODE_ENV === 'development' ? '/api' : 'https://www.test.com'
然后uni.request请求的url应该是这样:baseUrl + '/user/info'
然后浏览器看到的请求地址应该是
http://localhost:8080/user/info
复制代码
~~~
## 方法三 :直接在项目根目录创建一个vue.config.js文件,配置跟方法二一样
~~~
该方法跟2一样的,uniapp会识别这个vue.config.js文件,不过manifest.json的优先级
要高于vue.config.js文件
~~~
- 前端指南
- 基础
- HTML、HTTP、web综合问题
- css部分
- 学习指南
- 开发指南
- css指南
- JavaScript
- 视图、文件
- canvas
- 二维码的生成
- 64码及图片
- weui
- Promise
- 第三方js
- 网络请求
- 字符串,数组,时间
- 时间类
- Css
- 布局封装
- 媒体布局
- 九宫格图片自适应
- 两行显示,且省略
- uni-app
- uniapp踩坑指南
- 表单类
- 商品规格
- 页面操作
- H5端返回按钮不显示
- H5解决浏览器跨域问题
- uView——Waterfall 瀑布流
- uniapp中使用复制功能(复制文本到粘贴板)
- 动态导航栏的实现
- React
- React基础
- 微信小程序
- 上传多图
- uni-app 微信小程序生成小程序码二维码带参数
- 小程序分享图片给好友,到朋友圈,保存到本地
- 缓存封装
- Vue
- 深度作用选择器deep
- 使用js实现列表无限循环滚动(横向)
- js 无限循环垂直滚动列表
- 可视化
- AntV
- 玫瑰图