map遍历 d3 checkbox concurrency vbscript pagination laravel4 swiftui 前端vue框架 nginx教程视频 ceb转换成pdf在线转换 leach算法 h5下拉刷新 android自定义控件 ssr链接解析 本地安装mysql jquery validate python生成随机数 python中count python编程题 java9 javasubstring java的输入 java判断文件是否存在 javaenum java数据类型转换 linux系统安装步骤 linux镜像安装 python开发实例 球中的小鬼 马赛克软件 冬青鼠 手机照片恢复免费软件 ram容量是什么意思 摩斯密码在线翻译 微信砍价活动怎么做 摩尔斯电码翻译器在线 gg修改器下载 苹果手机总是自动重启 abr文件
当前位置: 首页 > 学习教程  > 编程语言

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

2020/12/5 9:52:32 文章标签:

我直接来看流程吧 第一步: 第二步 第三步 以上就是所有配置,接下来看看我们怎么使用吧,我这里把uni.request网络请求进行了二次封装; 先看一下我的目录结构吧; index.config.js const CONFIG {// 开发环境配置development: {assetsPath: /static, // 静态资源路径baseUrl:…

我直接来看流程吧

第一步: 

 第二步

第三步

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

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

 

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

<script>
import {index} from '@/api/product'
method:{
    async indexInit() {
				this.$https({
					url: index,
					method: "post",
					success: res => {
						console.log(res)
					}
				})
			},
}
</script>

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

 

根据自己项目习惯而定

 

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

 

 

 

 

 


本文链接: http://www.dtmao.cc/news_show_450091.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?