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跨域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解uniapp的全局变量实现方式

    前言 本文整理了一些uniapp全局变量的实现方式,细节知识来自于uView官网中对uniapp中的全局变量实现,感兴趣的同学可以前往uView官网搜索vuex进行查看 全局变量的实现方式 一般来说在uniapp中有以下几种方式 本地存储 配置文件 挂载到 Vue.prototype globalData vuex 下面对这5种方式的实现进行介绍 本地存储 永久存储,以app为例即使该应用被关闭,该数据依然会被存储 这是一种永久的存储方式,类似于web的Local Storage(有关于Cook

  • 基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

    一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.App端) 且兼容效果一致. 二.效果预览 在H5.小程序.App端测试效果如下:(后续大图均为APP端) 三.使用技术 编码器+技术:HBuilderX + vue/NVue/uniapp/vuex iconfont图标:阿里字体图标库 自定义导航栏 + 底部Tabbar 弹窗组件:uniPop(un

  • uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果

    uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果

    前言 实现思路:通过小程序API中的触摸事件,配合CSS来实现元素的显示和隐藏.ps(也想过另一种通过监听页面滚动的方式来实现,不过效果一定很差0.0) 一.需要用到的事件touchmove.touchend 二.话不多说上代码 1.看需求,如果是整个屏幕滑动后元素发生变化,最好放在最外面的view 代码如下: <view class="container" @touchmove="handletouchstart" @touchend="handl

  • uniapp微信小程序实现一个页面多个倒计时

    本文实例为大家分享了uniapp实现一个页面多个倒计时的具体代码,供大家参考,具体内容如下 设计图(需求) 在这里插入图片描述 结构 <view class="group-list" v-for="item in message" :key="item.productId"> <view class="group-img" @click="navTo"> <image :src

  • uniapp实现横向滚动选择日期

    uniapp实现横向滚动选择日期

    本文实例为大家分享了uniapp实现横向滚动选择日期的具体代码,供大家参考,具体内容如下 1.方法封装 common.js //获取当前时间,格式YYYY-MM-DD HH:MM:SS const GetNowTime = time => { var date = time, year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour = date.getHours() < 10 ? &q

  • uniapp实现可滑动选项卡

    本文实例为大家分享了uniapp实现可滑动选项卡的具体代码,供大家参考,具体内容如下 tabControl-tag.vue <template name="tabControl"> <scroll-view scroll-x="true" :style="'background-color:'+bgc+';top:'+top+'px;'" :class="fixed?'fxied':''" :scroll-l

  • 使用 UniApp 实现小程序的微信登录功能

    1.微信登录思路: 在main.js 中封装公共函数,用于判断用户是否登录 在main.js 中分定义全局变量,用于存储接口地址 如果没有登录.则跳转至登录页面 进入登录页面 通过 wx.login 获取用户的 code 通过 code 获取用户的 SessionKey.OpenId 等信息[本应后台接口.但是此处使用js发送请求] 通过 openId 调用后台 Api 获取用户的信息 获取成功,则说明已经授权过了,直接登录成功 获取失败,则说明没有授权过,需要授权之后才能进行登录 用户点击页面

  • uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

  • uniapp H5 https跨域请求实现

    uniapp H5 https跨域请求实现

    什么是跨域 跨域是浏览器的专用概念,指js代码访问自己来源站点之外的站点.比如A站点网页中的js代码,请求了B站点的数据,就是跨域. A和B要想被认为是同域,则必须有相同的协议(比如http和https就不行).相同域名.和相同端口号(port). 如果你是做App.小程序等非H5平台,是不涉及跨域问题的. 由于uni-app是标准的前后端分离模式,开发h5应用时如果前端代码和后端接口没有部署在同域服务器,就会被浏览器报跨域. 本文主要介绍uniapp H5开发中,本地调试https的接口实现跨

  • 基于CORS实现WebApi Ajax 跨域请求解决方法

    概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各种APP万花齐放的今天,API的跨域请求是不能避免的. 在默认情况下,为了防止CSRF跨站的伪造攻击(或者是 javascript的同源策略(Same-Origin Policy)),一个网页从另外一个域获取数据时就会收到限制.有一些方法可以突破这个限制,那就是大家熟知的JSONP, 当然这只是众多

  • Ajax如何进行跨域请求?Ajax跨域请求的原理

    Ajax如何进行跨域请求?Ajax跨域请求的原理

    本文实例为大家分享了Ajax跨域请求的具体实现过程,供大家参考,具体内容如下 下面我们在本地建两个站点演示一下 第一步首先我们在本地搭建好一个Apache服务器:下载地址: 第二步服务器配置好以后,在本地配置好两个虚拟的域名: 第三步我们在C盘建一个文件夹命名为"HTML5": 第四步找到Apache虚拟主机的配置文件,然后打开配置文件 第五步在第三步建的HTML5文件夹下分别建一个文件夹a和文件夹b; 第六步修改Apache虚拟主机的配置文件,如图 第七步修改一下host文件,添加a

  • JavaScript用JSONP跨域请求数据实例详解

    前言 最近因为工作需要,需要把爱词霸的每日一句引入到页面上,爱词霸向外开放了 API, 接口返回 json 数据,为了让页面更轻巧,我没有用 jQuery,而是直接纯 js 写了一段代码: <script type="text/javascript"> function httpGetAsync(theUrl, callback) { xmlHttp = null; if (window.XMLHttpRequest) {// code for IE7, Firefox,

  • Ajax jsonp跨域请求实现方法

    什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 具体策略限制情况可看下表: URL 说明 允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 h

  • 探讨跨域请求资源的几种方式（总结）

    探讨跨域请求资源的几种方式（总结）

    跨域请求资源的几种方式,具体如下: 1.什么是跨域 2.JSONP 3.proxy代理 4.cors 5.xdr 由于浏览器同源策略,凡是发送请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域.具体可以查看下表 JSONP 这种方式主要是通过动态插入一个script标签.浏览器对script的资源引用没有同源限制,同时资源加载到页面后会立即执行(没有阻塞的情况下). <script> var _script = document.createElement('script')

  • Vue2.0 vue-source jsonp 跨域请求

    Vue2.0 vue-source jsonp 跨域请求

    本文介绍了Vue2.0 vue-source jsonp 跨域请求,分享给大家,希望对大家有所帮助 以调用百度的输入提示接口为例 main.js import Vue from 'vue' import VueResouse from 'vue-resource' import App from './App.vue' Vue.use(VueResouse) new Vue({ el: '#app', render: h => h(App) }); App.vue <script> ex

  • Java利用cors实现跨域请求实例

    由于ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告 网站开发,在某些情况下需要用到跨域. 什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制. ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告. 常见解决跨域的方式 script标签 iframe

  • JavaScript如何实现跨域请求

    什么是跨域请求? 简单的理解就是向不在同一个域名的服务器文件发出请求.这个还是用实际的例子来说明一下吧,比如baidu.com向cxyblog.com发送请求,这两个域名是不同的,那么这就是跨域了,出于安全性的考虑,这样是不允许的.另外需要注意的是不同子域名或者同域名不同端口之间或者相同域名不同协议等发送的请求也都算是跨域的,基本上可以为归为下面几类: (1)http://www.baidu.com向http://www.cxyblog.com发送请求 (2)http://www.cxyblog

  • vue-cli开发环境实现跨域请求的方法

    前端开发时,请求后台接口经常需要跨域,vue-cli实现跨域请求只需要打开config/index.js,修改如下内容即可. //例如要请求的接口url为http://172.3.2.1:8000/look/1 module.exports = { dev:{ proxyTable:{ '/api':{ target: 'http://172.3.2.1:8000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } 这时在你想请求

随机推荐