🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 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文件 ~~~