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与jquery动态创建html元素示例

    javascript与jquery动态创建html元素示例

    这篇文章主要介绍了javascript与jquery动态创建html元素的方法,结合实例形式分析了javascript与jQuery动态创建页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • 利用js给datalist或select动态添加option选项的方法

    利用js给datalist或select动态添加option选项的方法

    下面小编就为大家分享一篇利用js给datalist或select动态添加option选项的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • HTML+CSS+JavaScript实现可拖拽模态框

    HTML+CSS+JavaScript实现可拖拽模态框

    这篇文章主要为大家详细介绍了HTML+CSS+JavaScript实现可拖拽模态框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考

    浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考

    这篇文章主要介绍了浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • JS实现随机生成字符串(可指定长度)的示例代码

    JS实现随机生成字符串(可指定长度)的示例代码

    本文主要介绍了JS实现随机生成字符串(可指定长度)的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • javascript实现最长公共子序列实例代码

    javascript实现最长公共子序列实例代码

    最长公共子序列(longest common sequence)和最长公共子串(longest common substring)不是一回事儿,下面这篇文章主要给大家介绍了关于javascript实现最长公共子序列的相关资料,需要的朋友可以参考下。
    2018-02-02
  • JavaScript forEach()遍历函数使用及介绍

    JavaScript forEach()遍历函数使用及介绍

    这篇文章主要介绍了JavaScript forEach()遍历函数使用及介绍,本文讲解了使用forEach遍历数组的用法以及提前终止循环的一个方法技巧,需要的朋友可以参考下
    2015-07-07
  • JS回调函数基本定义与用法实例分析

    JS回调函数基本定义与用法实例分析

    这篇文章主要介绍了JS回调函数基本定义与用法,结合实例形式较为详细的分析了javascript回调函数基本概念、功能、使用方法与相关注意事项,需要的朋友可以参考下
    2017-05-05
  • javascript实现可改变滚动方向的无缝滚动实例

    javascript实现可改变滚动方向的无缝滚动实例

    无缝滚动在制作一些图片展示的时候还是蛮有用的,下面与大家分享下javascript实现的可改变滚动方向的无缝滚动,具体实现如下,感兴趣的朋友可以参考下哈
    2013-06-06
  • JavaScript实现涂鸦笔功能

    JavaScript实现涂鸦笔功能

    这篇文章主要为大家详细介绍了JavaScript实现涂鸦笔功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06

最新评论