一、设置请求代理,解决跨域
manifest.json——源码视图——h5(配置反向代理)

"h5" : {
    "devServer" : {
        //"port" : 8080, //设置端口号
        "disableHostCheck" : true,
        "proxy" : {
            "/api" : {// /api重定向 将下方的target拼接到接口的最前面
            	// 线上接口域名 打包时使用
                //"target" : "http://xxx.com", 
                // 本地接口域名 需代理到指定服务器 开发时使用
                "target" : "http://192.168.1.188:6078/",
                
                "changeOrigin" : true, //是否跨域
                "secure" : false, //设置支持https协议的代理
                "ws" : false,
                "pathRewrite" : {
                    "^/api" : "" //路径重写,将接口路径中以/api开头的部分替换掉
                }
            }
        }
    },
    "router" : {
        "mode" : "hash",
        "base" : "./"
    },
    "title" : "项目名称",
    "optimization" : {
        "treeShaking" : {
            "enable" : true //启用摇树优化
        }
    },
    "domain" : "http://xxx.com"
},

二、请求方法的封装
在这里插入图片描述

post(url,param) {
	return new Promise((resolve,reject) =>{
		uni.showLoading({ title:'加载中...' });
        uni.request({
            method:'POST',
            url: baseUrl+url,
            data: param,
            header:getHeaders(),
        }).then(res=>{
			uni.hideLoading();
			let errorMsg = ''
			switch (res[1].statusCode) {
				case 200:
					resolve(res[1])
					break
				case 400:
					errorMsg = '请求无效';
					resolve(res[1]);
					break
				case 401:
					errorMsg = '未授权,请登录';
					resolve(res[1]);
					break   
				 case 403:
					errorMsg = '跨域拒绝访问'
					resolve(res[1]);
					break
				case 404:
					errorMsg = '请求地址出错';
					resolve(res[1]);
					break
				case 408:
					errorMsg = '请求超时';
					resolve(res[1]);
					break
				case 500:
					errorMsg = '服务器内部错误';
					resolve(res[1]);
					break
				case 501:
					errorMsg = '服务未实现';
					resolve(res[1]);
					break
				case 502:
					errorMsg = '网关错误';
					resolve(res[1]);
					break
				case 503:
					errorMsg = '服务不可用';
					resolve(res[1]);
					break
				case 504:
					errorMsg = '网关超时';
					resolve(res[1]);
					break
				case 505:
					errorMsg = 'HTTP版本不受支持';
					resolve(res[1]);
					break	
				default:
				reject(res)
			}
			if(errorMsg){
				uni.showToast({
					title: errorMsg,
					icon: 'none',
				});
			}
        }).catch(err => {
			uni.hideLoading();
			reject(err);
			uni.showToast({
				title: '服务器开小差了呢,请您稍后再试',
				icon:'none',
			});
		});
    });   
},

三、使用
main.js

import request from './common/request';/* 引入文件 */
Vue.prototype.$http = request;/* 挂载原型 */

page.vue

get_wxauthurl() {
	// 例:http://192.168.1.188:6078/Login/In?action=get_wxauthurl
	// F12查看会拼接设置的api:http://localhost:8080/api/Login/In?action=get_wxauthurl 即完成跨域代理
	this.$http.post("Login/In?action=get_wxauthurl", {
	}).then(res => {
		console.log(res );
	}).catch(err => {
		console.log(err);
	});
},
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐