vue-resource jsonp 크로스 도 메 인 문제 해결 방법

최근 에 vue.js 를 공부 하 다가 ajax 크로스 도 메 인 요청 문제 에 부 딪 혔 습 니 다.전에 jsonp 로 해결 할 수 있다 는 것 을 알 았 지만 실천 해 본 적 이 없습니다.이번 에는 안에 많은 문 제 를 발 견 했 습 니 다.그래서 지금 기록 해 두 었 습 니 다.jsonp 를 사용 하 는 친구 들 에 게 도움 을 주 고 싶 습 니 다!
jsonp 가 무엇 인지,그리고 왜 jsonp 를 사용 해 야 하 는 지 에 대해 서 는 더 이상 말 하지 않 겠 습 니 다.모 르 는 학생 들 은 스스로 바 이 두 를 해 보 겠 습 니 다.
jQuery 에 있 는 jsonp 요청 을 먼저 말씀 드 리 겠 습 니 다.vue-resource 에 있 는 jsonp 를 알 면 쉽게 알 수 있 습 니 다.
여기 서 제 이 슨 데 이 터 를 예 로 들 면 우선$.get 을 통 해 우리 가 원 하 는 대상 을 직접 얻 을 수 있 지만 제 이 슨 p 를 사용 하면 오류 코드 가 다음 과 같 습 니 다.

$.ajax({
 url:"http://192.168.8.59/weixinvip/VIP/ERP/Home/api.ashx?a=getwxativity&i=1",
 type:"GET",
 dataType:"jsonp",
 sccuess:function(data){
  console.log(data)
 }
})

이때 우 리 는 콘 솔 이 우리 가 원 하 는 대로 data 데 이 터 를 출력 하지 않 고 잘못 보고 한 것 을 보 았 다.
이때 우 리 는 Network 를 살 펴 보 았 는데,실제로 데 이 터 를 요청 한 것 을 보 았 다.


우 리 는 요청 이 성공 한 것 을 볼 수 있 습 니 다.상태 코드 200,데이터 도 되 돌 아 왔 습 니 다.그런데 왜 잘못 보 고 했 습 니까?
이것 은 바로 우리 가 jsonp 의 원 리 를 분석 해 야 한다.
먼저 ajax 를 보 낼 때 정상 적 인 우 리 는 json 데 이 터 를 받 았 지만 JS 는 json 데 이 터 를 직접 조작 하 는 것 이 불편 합 니 다.이때 jQuery 는 자동 으로 JS 대상 으로 해석 해 주 었 습 니 다.
jsonp 는 실제로 자바 스 크 립 트 로 스 크 립 트 를 불 러 오 는 방식 으로 데 이 터 를 불 러 오 는 것 과 같다 는 것 을 잘 알 고 있 습 니 다.
여기까지 말 하면 어떤 친구 들 은 왜 잘못 보 고 했 는 지 알 것 같 습 니 다.사실은 이때 바로 페이지 에 script 을 추 가 했 습 니 다.안의 내용 은 바로 우리 에 게 돌아 온 데 이 터 를 되 돌려 주 는 것 입 니 다.

<script src="http://192.168.8.59/weixinvip/VIP/ERP/Home/api.ashx?a=getwxativity&i=1"></script>

이제 다시 생각해 보 자.이 자 바스 크 립 트 코드 는 사실 의미 없 는 대상 이다.변 수 를 할당 하지 않 았 기 때문에 가 져 올 수 없다.그래서 이 럴 때 우 리 는 백 스테이지 동료 들 의 협조 가 필요 하 다.나 는 여기까지 말 하면 모두 가 어떻게 하 는 지 알 것 이 라 고 믿는다.그래서 jQuery 의 ajax 는 더 이상 말 하지 않 을 것 이다.
오늘 은 주로 vue-resource 에 있 는 jsonp 크로스 도 메 인 요청 문 제 를 말씀 드 리 겠 습 니 다.
잡담 은 많이 하지 않 고 코드 를 직접 올 립 니 다.

var vm = new Vue({
 el:'#signRecord',
 data:{},
 beforeMount:function(){
  this.$http.jsonp("http://192.168.8.59/weixinvip/VIP/ERP/Home/api.ashx?a=getwxativity&i=1")
  .then(function(data){
   console.log(data)
  })
 }
})

마찬가지 로 잘못 보 고 했 습 니 다.그리고 vue-resource 가 우리 에 게 잘못 을 더 보 여 주 었 습 니 다.network 를 다시 보 겠 습 니 다.


마찬가지 로 성공 을 요 청 했 고 데이터 도 받 았 지만 잘못 보고 했다.우 리 는 요청 헤드 를 주의 깊 게 살 펴 보면 인자 가 하나 더 생 긴 것 을 발견 할 수 있 습 니 다.


이 매개 변 수 는 무엇 입 니까?소스 좀 봅 시다.

실제로 콜백 은 무 작위 로 생 성 된 문자열 이 고 이 매개 변수 이름 은 우리 가 직접 이름 을 지 을 수 있 습 니 다.지정 하지 않 으 면 기본적으로"콜백"입 니 다.
기본적으로 전 달 된 매개 변 수 는 틀림없이 유용 할 것 이다.
사실 vue 에서 jsonp 를 보 내 는 데 두 개의 인자 가 있 습 니 다.어디 보 자.

Vue.http.jsonp(url,{params: {pageID:29},jsonp:"_callback"}) //      ， callback 

여기 params 는 보 낼 데이터 대상 입 니 다.jsonp 는 리 셋 이름,즉 위의 callback 이름 을 설정 합 니 다.(기본 값 을 콜백 으로 설정 하지 않 음)지금 필요 합 니 다.
백 스테이지 협조 해서 우리 가 보 낸""를 획득 하 세 요.callpack"의 값,이 값 을 되 돌아 오 는 json 데이터 에 연결 하면 됩 니 다!