【uniapp—H5本地开发】设置请求代理，解决跨域，以及请求方法的封装

最新推荐文章于 2024-08-12 21:15:00 发布

avoidaily

最新推荐文章于 2024-08-12 21:15:00 发布

阅读量3.8k

点赞数 1

分类专栏： uniapp 文章标签： http uni-app

本文链接：https://blog.csdn.net/qq_43459224/article/details/120655130

版权

uniapp 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了在uni-app中设置反向代理解决跨域问题的方法，以及封装HTTP请求的步骤。通过修改manifest.json配置实现h5端的代理，并展示了封装POST请求的代码，确保在开发过程中能正确处理各种HTTP状态码。最后，展示了如何在Vue组件中调用封装后的请求方法。

摘要由CSDN通过智能技术生成

一、设置请求代理，解决跨域
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);
	});
},