Uniapp项目实战之H5端运行到外置浏览器存在跨域问题的解决

一、Uniapp在官方api中已经明确表示H5 端本地调试时会遇到跨域问题，其实官方api已经明确给出了解决方案，在此记录以防踩坑，官方解决方案

二、官方推荐使用方案一：使用HBuilderX内置浏览器；方案二：配置webpack-dev-server代理；方案三：给浏览器安装跨域插件，禁止浏览器报跨域；方案一内置浏览器用起来总是有点感觉不舒服，方案三可能插件不起作用，这里我们使用方案二

1.使用HBuilderX新建uniapp项目，找到manifest.json文件然后找到源码视图模块而后再在其中找到H5模块

2.然后就可以在其中添加如下

devServer

    "h5" : {
        "router" : {
            "mode" : "hash" // 路由模式
        },
        "devServer" : {
            "https" : false, // 是否启用 https 协议，默认false
            "port": 8080, // 端口号
            "disableHostCheck": true, // 禁用 Host 检查，默认false
            "proxy": { // 与vue中的proxyTable配置大致上一致,此处我同时代理了两个
                "/dev": { // 测试
                    "target": "http://xxx.xxx.x.xxx:xxxx", // 目标接口域名
                    "changeOrigin": true, // 是否跨域
                    "secure": false, // 设置支持https协议的代理
                    "pathRewrite":{"^/dev":""} // 这个一定要加,意思就是把你项目中一dev开头的接口自动替换为 target + pathRewrite第二个参数来进行数据的请求(pathRewrite没有第二个参数的话直接为target)
                },
                "/pre": { // 预发布
                    "target": "http://xxx.xxx.x.xxx", // 目标接口域名
                    "changeOrigin": true, // 是否跨域
                    "secure": false, // 设置支持https协议的代理
                    "pathRewrite":{"^/pre":"/api"} // 此处pathRewrite加第二个参数是因为我的接口最后都有一个/api,在这个地方加/api等价于直接在target后加/api
                }
            }
        }
    }

3.使用

可使用new Promise将uni.request封装起来

		uni.request({
			url: '/dev/****/****/***', // dev或pre亦或者是其他开头，会检测到开头而后自动替换为代理的域名
			header: {},
			timeout: 30000, // 响应时间
			method: 'POST' // 请求方式
			data: {}, // data数据,有就传没有就不传
			success: (res) => { // 请求成功
				console.log('请求成功： ', res)
			},
			fail: (req) => { // 请求失败
				console.log('请求失败： ', {url: baseUrl + url, ...req})
			},
			complete: function () { // 无论成功失败
			},
		})