uniapp H5 https跨域请求实现
更新时间：2022年07月27日 15:40:16 作者：吴维炜
这篇文章主要介绍了uniapp H5 https跨域请求实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
什么是跨域
跨域是浏览器的专用概念，指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":"https://域名/api",
"changeOrigin": true,//是否跨域
"secure": true,// 设置支持https协议的代理
"pathRewrite":{"^/api":""}
}
}
}
}
接口请求
uni.request({
// url: ApiUrl + opt.url,
url: '/api' + opt.url,
data: data,
method: opt.method,
header: opt.header,
dataType: 'json',
success: function (res) {
if(res.data.code=='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跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了javascript继承体系的相关资料,需要的朋友可以参考下2017-10-10
javascript 事件绑定的一些兼容写法整理非常不错，感谢2009-12-12
本文主要介绍了JavaScript实现点赞功能的示例,分享给大家2014-04-04
本文主要介绍了js面向对象编程的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了小程序如何写动态标签的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了Bootstarp 基础教程之表单部分实例代码，非常不错，具有参考借鉴价值，需要的朋友参考下2017-02-02
这篇文章主要介绍了JS实现关键词高亮显示正则匹配功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
这篇文章主要针对javascript模块化为大家进行简单解析，如何写一个模块，在页面中加载模块的方法，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了JS中常用的正则表达式，都是我日常收集整理的，包括电话验证，数字验证，车牌号码验证，身份证号验证包括15位18位身份证验证，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-09-09
百叶窗下拉菜单效果非常棒，今天小编给大家分享一段js代码实现类似百叶窗下拉菜单效果，需要的朋友参考下2016-12-12
最新评论