uniapp之h5反向代理设置踩坑，解决跨域问题(超详解)

悠悠 2022-12-26 11:17 433阅读 0赞

我直接来看流程吧

第一步:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

第二步

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

第三步

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2][]

以上就是所有配置,接下来看看我们怎么使用吧,我这里把uni.request网络请求进行了二次封装;

先看一下我的目录结构吧;

![20201205094203357.jpg][]

index.config.js

const CONFIG = {
    	// 开发环境配置
    	development: {
    		assetsPath: '/static', // 静态资源路径
    		baseUrl: 'https://administrator.dongtiyan.com', // 后台接口请求地址
    		hostUrl: 'https://administrator.dongtiyan.com', // H5地址(前端运行地址)
    		websocketUrl: '', // websocket服务端地址
    		weixinAppId: '' // 微信公众号appid
    	},
    	// 生产环境配置
    	production: {
    		assetsPath: '/static', // 静态资源路径
    		baseUrl: 'https://administrator.dongtiyan.com', // 后台接口请求地址
    		hostUrl: 'https://administrator.dongtiyan.com', // H5地址(前端运行地址)
    		websocketUrl: '', // websocket服务端地址
    		weixinAppId: '' // 微信公众号appid
    	}
    
    };
    export default CONFIG[process.env.NODE_ENV];

request.js

/**
     * 封装网络请求
     */
    
    import indexConfig from '@/config/index.config'
    
    module.exports = (params) => {
    	// let url = indexConfig.baseUrl + params.url;					// 线上环境中开启
    	let url = "/dpc/" + params.url;									// 本地访问时开启
    	let method = params.method;
    	let header = params.header || {};
    	let data = params.data || {};
    	// 请求方式 get post
    	if (method) {
    		method = method.toUpperCase(); // 小写转大写
    		if (method == "POST") {
    			header = {
    				// 'Content-Type': 'application/x-www-form-urlencoded',
    				'Access-Control-Allow-Origin': '*'
    			};
    		}
    	}
    	//	发起请求 加载动画
    	if (!params.hideLoading) {
    		uni.showLoading({
    			title: "加载中"
    		})
    	}
    	//	发起网络请求
    	uni.request({
    		url: url,
    		method: method || "GET",
    		header: header,
    		data: data,
    		dataType: "json",
    		sslVerify: false, //	是否验证ssl证书
    		success: res => {
    			if (res.statusCode && res.statusCode != 200) {
    				//	api错误
    				uni.showModal({
    					content: res.msg
    				})
    				return;
    			}
    			typeof params.success == "function" && params.success(res.data);
    			uni.hideLoading()
    		},
    		fail: err => {
    			// console.log(err)
    			uni.hideLoading()
    			uni.showModal({
    				content: err.errMsg
    			})
    			typeof params.fail == "function" && params.fail(err.data);
    		},
    		complete: (e) => {
    			// console.log("请求完成");
    			// uni.hideLoading()
    			typeof params.complete == "function" && params.complete(e.data);
    			return;
    		}
    	})
    }

以上就配置好了,最后我们配置一下全局,挂载到vue中;

mian.js

// 引入全局方法
    import https from '@/utils/request.js'
    
    // 挂载全局自定义方法
    Vue.prototype.$https = https;

我们来看看怎么使用吧

index.vue

product这个是我的api文件,不用在意,你也可以url: '/api/index';

根据自己项目习惯而定

以上就是分享的所有内容,有什么疑问可以下方留言

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201205093719495.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: /images/20221120/0b870bbba9c84fccb22ef02a35639a39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2]: /images/20221120/e660ddb0ec654bbf8c06889eab463bc2.png
[20201205094203357.jpg]: /images/20221120/fbd52674d18548d8a1f57fd48e1cf4d9.png