【uniapp—H5本地开发】设置请求代理,解决跨域,以及请求方法的封装_uniapp原生请求代理_avoidaily的博客-程序员宅基地

技术标签: uniapp  http  uni-app  

一、设置请求代理,解决跨域
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);
	});
},
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43459224/article/details/120655130

智能推荐

CentOS7 安装GCC 4.9.3_centos g++ 4.9.3安装_jshagw的博客-程序员宅基地

操作系统:CentOS7 64bitgcc:4.8.51、下载源码wget http://ftp.gnu.org/gnu/gcc/gcc-4.9.3/gcc-4.9.3.tar.bz22、解压文件tar xfvgcc-4.9.3.tar.bz23、下载依赖文件cd gcc-4.9.3 ///注意,要在gcc根目录执行./contrib/download_..._centos g++ 4.9.3安装

Android本地视频播放器开发--ffmpeg解码视频文件中的音频(1)_Loong.xu的博客-程序员宅基地

在上一章中Android本地视频播放器开发--NDK编译FFmpeg能够获取编译出来的ffmpeg库,接下来就是调用ffmpeg来实现解码,这里我们先解码音频,然后在播放音频,同时为了适应性我会用不同的方法进行播放例如使用Android提供的AudioTrack,SDL、OpengAL,OpenSL ES,最终合入视频播放器的是OpenSL ES,这样可以减少CPU的利用率。接下来在这一章中,

PgSQL · 应用案例 · 经营、销售分析系统DB设计之共享充电宝_weixin_34307464的博客-程序员宅基地

背景共享充电宝、共享单车、共享雨伞,共享女朋友^|^,共享汽车,。。。 共享经济最近几年发展确实非常迅猛。共享必定涉及被共享对象的管理、会员的管理等,实际上也属于一种物联网系统。本文以共享充电宝的场景为例,分享一下共享充电宝的经营分析、销售管理系统的后台数据库的设计。(老板关心的是整体销售的业绩,以及各个渠道的透视等。销售经理关心的是他管辖片区的销...

python 支持向量机 准确率 绘图_支持向量机Python_weixin_39964833的博客-程序员宅基地

import numpy as npfrom sklearn import svmfrom sklearn.model_selection import train_test_splitimport matplotlib as mplimport matplotlib.pyplot as pltdef iris_type(s):it = {b'Iris-setosa': 0,b'Iris-vers..._acc = a.ravel() == b.ravel()函数

kali2020安装黑屏_不随。的博客-程序员宅基地

文章目录[隐藏] kali 安装前言kali 安装黑屏解决办法 kali 安装前言今天下载了最新版的kali系统,在虚拟机中安装时,出现黑屏了,我估计大多数虚拟机系统安装黑屏都可以用下面的方式解决。万一下次再出现这种就可以解决了,留下备用kali 安装黑屏解决办法1. 菜单栏中搜索 cmd,右键以管理员权限方式打开;2. 在 cmd 框中输入: netsh winsock re...

ThreadPoolExecutor线程池得要这么用_gxflh的博客-程序员宅基地

什么是线程池,它有什么优点呢?重用线程池中的线程,避免因为线程的创建和销毁所带来的性能开销。 能有效控制线程池的最大并发数,避免大量的线程之间因相互抢占系统资源而导致的堵塞线程。 能够对线程进行简单的管理,并提供定时执行以及指定间隔循环执行等功能。 相对于AsyncTask来说,最大的优势在于:线程可控!比如在离开了某个页面,提交到AsyncTask不能的任务不能撤销,线程池可以在不需要的时候将某个线程移除。什么是线程池那么线程池我们该怎么创建呢?首先我们先来看一下创建线程池的构造方法.

随便推点

Vue3电商项目实战-结算&支付 4【08-支付-支付页面-基础布局、10-支付-支付页面-信息展示、11-支付-支付流程】_vue支付功能怎么实现_十一__一的博客-程序员宅基地

Vue3电商项目实战-结算&支付 4【08-支付-支付页面-基础布局、10-支付-支付页面-信息展示、11-支付-支付流程】_vue支付功能怎么实现

Firebug调试经验与技巧-程序员宅基地

昨天网站出问题了1·为了调试cookie 特别找了关于firebug里面如何调试cookie的文章。觉得这篇不错·保留下来备份Firebug调试经验与技巧(2009-03-13 15:22:16)转自-http://blog.sina.com.cn/s/blog_49fea3960100c5vj.html备忘用· 标签:杂谈 ..._firebug调试

幻灯片:循环播放图片_weixin_30650039的博客-程序员宅基地

/* 先载入所有图片及标签,然后通过设置图片的深度来显示相应的图片(并非点击标签后再载入相应图片,因为这种幻灯片一般图片比较少)*/package { import flash.display.Sprite; import flash.net.URLLoader; import flash.net.URLRequest; import flash.display.L...

手把手通过Docker部署前后端分离项目(亲测可用)_一个资深码农的博客-程序员宅基地

Docker基本安装和部署Nginx、MySQL、Vue和SpringBoot项目学习笔记(亲测可用),这里我用的是阿里云的服务器,环境是CentOS7!分享一些自己在学习路上的一些笔记,欢迎大家共同交流与探讨!_docker部署前后端分离项目

sql 语句 将查询结果中数字等标示转成汉字_笨伯我不笨的博客-程序员宅基地

使用case 语句将sex 字段进行转换 0 12男,女,未知SELECTu.userid,u.username,(CASE u.sexWHEN 0 THEN '女'WHEN 1 THEN '男'ELSE 'null' END) as PersonSexFROM hj_user u;https://blog.csdn.net/l...

mysql 只读会锁表吗_MySQL锁表的相关知识_宇文复的博客-程序员宅基地

今天在解决数据库同步异常的时候用到了flush tables with read lock 这个命令,于是顺便就学习了下锁表的相关知识。1.FLUSH TABLES WITH READ LOCK这个命令是全局读锁定,执行了命令之后所有库所有表都被锁定只读。一般都是用在数据库联机备份,这个时候数据库的写操作将被阻塞,读操作顺利进行。解锁的语句也是unlock tables。2.LOCK TABLES..._数据库读取就会锁表吗

推荐文章

热门文章

相关标签