uniapp开发 H5 解决跨域问题

浏览器控制台报错

Access to XMLHttpRequest at 'http://xxx.xxx.xxx.xx:8080/app/easypoi/importExcelFile' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

问题分析：

这是常见的跨域请求问题，在前后端分离的项目中常见，前端项目中的请求路径直接用后台请求路径（例如：http://xxx.xxx.xxx.xx:8080/demo/getUser.do）,但根据浏览器的网络请求规则，后台Server是不允许这样直接调用的（会被当黑客恶意攻击给拦截掉）。从而导致该跨域请求被拒绝。

第一步

设置 代理根域名

第二步 设置代理 proxy

代理方法一: manifest.json中设置

"h5": {
			"devServer" : {
			"https" : false,
			// "port":"9011", //端口号
			"proxy": {  
				"/host": {  // 接口请求中 从 /host 这里 进行代理
					target: 'http://XXX.XXX.XXX.XX:9011', //这里后台的地址模拟的;应该填写你们真实的后台接口
					"changeOrigin": true,  // 允许跨域  
					"secure": false,
					"pathRewrite": {
						"^/host": ""   // 重定向 为空
					}  
				}  
			}  
		},
	}

代理方法二: vue.config.js中设置

在devServer{}内加入代理

module.exports = {
	// 配置路径别名
	configureWebpack: {
		devServer: {
			// 调试时允许内网穿透，让外网的人访问到本地调试的H5页面
			disableHostCheck: true,
			// port: '9011', //端口号
			proxy: {
				'/host': { // 接口请求中 从 /host 这里 进行代理
					target: 'http://XXX.XXX.XXX.XX:9011', //这里后台的地址模拟的;应该填写你们真实的后台接口
					changeOrigin: true, // 允许跨域
					pathRewrite: {
						'^/host': '' // 重定向 为空
					} 
				}
			}
		}
	}
	// productionSourceMap: false,
}