유 니 앱 H5 https 크로스 도 메 인 요청 실현

무엇이 크로스 필드 입 니까?
크로스 도 메 인 은 브 라 우 저의 전용 개념 으로 js 코드 가 자신의 소스 사이트 이외 의 사이트 에 접근 하 는 것 을 말한다.예 를 들 어 A 사이트 웹 페이지 의 js 코드 는 B 사이트 의 데 이 터 를 요 청 했 는데 바로 크로스 필드 입 니 다.
A 와 B 가 같은 도 메 인 으로 여 겨 지 려 면 같은 프로 토 콜(예 를 들 어 http 와 https 는 안 됩 니 다),같은 도 메 인 이름,같은 포트 번호(port)가 있어 야 합 니 다.
만약 당신 이 앱,애플 릿 등 비 H5 플랫폼 을 한다 면 크로스 도 메 인 문 제 는 언급 되 지 않 습 니 다.
유 니 앱 은 표준 전후 단 분리 모델 이기 때문에 h5 응용 프로그램 을 개발 할 때 전단 코드 와 백 엔 드 인터페이스 가 같은 도 메 인 서버 에 배치 되 지 않 으 면 브 라 우 저 에 의 해 크로스 도 메 인 으로 보 고 됩 니 다.
본 고 는 주로 유 니 앱 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'
      });
    }
  })

이러이러 하 다
문제 설명
젊은이 가 유 니 앱 클 라 이언 트 에 게 제3자 와 연결 하 라 고 물 었 습 니 다.유 니 앱 은 제 가 https 를 사용 하지만 제3자 가 사용 하 는 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);

유 니 앱 H5 https 크로스 도 메 인 요청 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 유 니 앱 H5 https 크로스 도 메 인 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!