uniapp H5 https跨域请求实现
作者：吴维炜 发布时间：2024-04-10 16:20:27
标签：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);
来源：https://blog.csdn.net/qq_38209578/article/details/112557633
0
投稿猜你喜欢
- 在脚本中可设置需要备份的数据库表清单，并且会将备份文件通过gzip压缩。需要注意的是，这段脚本仅适用数据一致性要求不高的环境。#!/bin/
- [sql] --1.将每个老师的工资更新为原来的工资+奖金 --定义两个变量，用来存储ttid与reward declare @tid in
- 1。下载mysql-noinstall-5.1.33-win32.zip，然后解压 2。复制my-huge配置文件为my.ini 在 [my
一、前言今天学习视频时课后作业是找出1000以内既是素数又是回文数的数，写代码这个很容易，结果一运行遇到了bug，输出结果跟预期不一样，调试- 目录问题复现隐式转换总结参考问题在工作中发现，有一个接口只执行一条SQL查询语句，并且SQL明明使用了主键列，但是速度很慢。在MySQL中E
- 本文实例讲述了python模拟鼠标拖动操作的方法。分享给大家供大家参考。具体如下：pdf中的书签只有页码，准备把现有书签拖到一个目录中，然后
- 判断某一个对象里面是否存在某个属性，常见错误场景排查，但是你真的知道该如何使用嘛。关于这个问题，大家第一眼看到脑海中肯定会有多种方案去实现，
- 本文我们总结了几个在安装SQL Server数据库时常见问题的解决方案，供初学者学习参考，接下来让我们来一起看一下吧。常见问题一：安装Sql
- jsp表达式方式： <center> <table border="1"> <％ for
- 说到这个问题，基本上有人就会想到三个问题：1，什么是系统数据？2，为什么要移动系统数据库？3，移动系统数据库我们可以用附加和分离，为什么还要
- 为方便维护和实现开放性，我把调查的好几个主题都放到同一个数据库的同一个表名当中去了但问题是在查询其中一个调查主题时，往往还会显示不相关主题的
- 我就废话不多说了，还是直接看代码吧！import pandas as pd# 伪造一些数据fake_data = {'subject
- 很荣幸您能看到这篇文章，相信通过标题打开这篇文章的都是对tensorflow感兴趣的，特别是对卷积神经网络在mnist手写识别这个实例感兴趣
- 本文实例讲述了Python时间的精准正则匹配方法。分享给大家供大家参考，具体如下：要用正则表达式精准匹配时间，其实并不容易方式一:>&
- Python 提供了两个级别访问的网络服务。低级别的网络服务支持基本的 Socket，它提供了标准的 BSD Sockets API，可以访
- 一、慢查询日志概念对于SQL和索引的优化问题，我们会使用explain去分析SQL语句。但是真正的企业级项目有成千上万条SQL，我们不可能从
- 这篇文章主要介绍了python类继承和多态原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可
- 1.join函数的语法及用法（1）语法：'sep'.join(sep_object)参数说明sep：分割符，可为&l
- 本文实例讲述了Python基类函数的重载与调用方法。分享给大家供大家参考。具体分析如下：刚接触Python语言的时间不长，对于这个语言的很多
- 1、最郁闷的发现！！先看代码：<style>#a #b #c span{color:red;}#b #c span{color:
