当前位置 博文首页 > 文章内容

    uniapp H5 https跨域请求实现

    作者:shunshunshun18 栏目:未分类 时间:2021-01-14 14:45:54

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    什么是跨域

    跨域是浏览器的专用概念,指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);