怎么在uniapp中利用H5實現(xiàn)https跨域請求？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

創(chuàng)新互聯(lián)公司是一家專業(yè)提供蕭縣企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、HTML5、小程序制作等業(yè)務(wù)。10年已為蕭縣眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進行中。

什么是跨域

跨域是瀏覽器的專用概念，指js代碼訪問自己來源站點之外的站點。比如A站點網(wǎng)頁中的js代碼，請求了B站點的數(shù)據(jù)，就是跨域。
A和B要想被認為是同域，則必須有相同的協(xié)議（比如http和https就不行）、相同域名、和相同端口號（port）。

如果你是做App、小程序等非H5平臺，是不涉及跨域問題的。

由于uni-app是標準的前后端分離模式，開發(fā)h6應(yīng)用時如果前端代碼和后端接口沒有部署在同域服務(wù)器，就會被瀏覽器報跨域。

本文主要介紹uniapp H5開發(fā)中，本地調(diào)試https的接口實現(xiàn)跨域請求

源碼視圖

"h6" : {
    "title" : "",
    "domain" : "",
    "router" : {
      "mode" : "hash",
      "base" : "/h6/"
    },
    "devServer" : {
		// "https" : true,
		"proxy":{
			"/api": {		       
				"target":"https://域名/api",
				"changeOrigin": true,//是否跨域
				"secure": true,// 設(shè)置支持https協(xié)議的代理
				"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: '網(wǎng)絡(luò)異常',
				icon:'none'
      });
    }
  })

如此這般，跨域功成。

問題引申

有小伙伴問uniapp客戶端對接第三方，uniapp這邊我用的是https，但是第三方用的http，請問這種該如何去解決跨域問題呢？

// 思路和vue是一樣的
1、安裝vue jsonp
npm i -S vue-jsonp
// 引入vue-jsonp 解決服務(wù)跨域請求問題
2、在main.js中導入vue-jsonp
import {VueJsonp} from 'vue-jsonp'
Vue.use(VueJsonp);

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

網(wǎng)站名稱：怎么在uniapp中利用H5實現(xiàn)https跨域請求-創(chuàng)新互聯(lián)
文章分享：http://weahome.cn/article/ccihos.html