解决uniapp在h5跨域问题进行反向代理

在项目根目录创建vue.config.js进行反向代理

module.exports = {
	devServer: {
		proxy: {
			'/api': {
				target: 'http://localhost:7788',
				ws: true,
				changeOrigin: true,
				pathRewrite: {
					'^/api': ''
				}
			}

		}

	}
}

创建untils/config.js（把请求根路径抽离除来，方便维护）

export default {
	baseUrl:'根路径'
}

创建untils/http.js  用 ifdef 判断终端

import config from './config.js'
export default (url, data, method = 'GET') => {
	return new Promise((resolve, reject) => {
		uni.request({
			// #ifdef MP-WEIXIN
			url: config.baseUrl + url,
			// #endif	


			// #ifdef H5
			url: '/api' + url,
			// #endif

			data: data,
			success: (res) => {
				resolve(res.data)
			},
			fail: (erro) => {
				reject(erro)
			}
		})
	})
}

把以下代码粘到根目录 manifest.json中的源码视图

"h5": {
		"title": "Test",
		"devServer": {
			"port": H5端的端口号,
			"disableHostCheck": true,
			"proxy": {
				"/api": {
					"target": "接口路径",
					"changeOrigin": true,
					"secure": false,
					"pathRewrite": {
						"^/api": ""
					}
				}
			}
		}
	}

如图所示：

修改完之后重启HBuilder X！