uniappH5https跨域请求实现
什么是跨域
跨域是浏览器的专⽤概念，指js代码访问⾃⼰来源站点之外的站点。⽐如A站点⽹页中的js代码，请求了B站点的数据，就是跨域。
A和B要想被认为是同域，则必须有相同的协议（⽐如http和https就不⾏）、相同域名、和相同端⼝号（port）。
如果你是做App、⼩程序等⾮H5平台，是不涉及跨域问题的。
由于uni-app是标准的前后端分离模式，开发h5应⽤时如果前端代码和后端接⼝没有部署在同域服务器，就会被浏览器报跨域。
本⽂主要介绍uniapp H5开发中，本地调试https的接⼝实现跨域请求
源码视图
"h5" : {
"title" : "",
"domain" : "",
"router" : {
"mode" : "hash",
"base" : "/h5/"
},
"devServer" : {
// "https" : true,
"proxy":{
"/api": {
"target":"域名/api",
"changeOrigin": true,//是否跨域
"secure": true,// 设置⽀持https协议的代理
"pathRewrite":{"^/api":""}
}
}
}
}
接⼝请求
// url: ApiUrl + opt.url,
url: '/api' + opt.url,
data: data,
method: hod,
vuejson转对象
header: opt.header,
dataType: 'json',
success: function (res) {
if(de=='401'){
uni.showToast({
title: res.data.msg,
icon: 'none'
});
uni.navigateTo({
url: '/pages/me/login'
});
} else {
opt.success(res);
}
},
fail: function (res) {
uni.hideLoading();
// opt.fail(res);
uni.showToast({
title: '⽹络异常',
icon:'none'
});
}
})
如此这般，跨域功成。
问题引申
有⼩伙伴问uniapp客户端对接第三⽅，uniapp这边我⽤的是https，但是第三⽅⽤的http，请问这种该如何去解决跨域问题呢？// 思路和vue是⼀样的
1、安装vue jsonp
npm i -S vue-jsonp
// 引⼊vue-jsonp 解决服务跨域请求问题
2、在main.js中导⼊vue-jsonp
import {VueJsonp} from 'vue-jsonp'
Vue.use(VueJsonp);
到此这篇关于uniapp H5 https跨域请求实现的⽂章就介绍到这了，更多相关uniapp H5 https跨域内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。