vue-resource의 jsonp 도메인 간 문제 관련-JS 튜토리얼-php.cn

vue-resource의 jsonp 도메인 간 문제 관련

亚连

풀어 주다： 2018-06-07 17:47:41

원래의

2720명이 탐색했습니다.

이제 vue-resource jsonp를 기반으로 한 도메인 간 문제에 대한 솔루션을 공유하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

최근에 vue.js를 배우고 있는데 ajax 크로스 도메인 요청에 문제가 발생했습니다. 이전에는 jsonp로 해결할 수 있다는 것을 알았지만 한번도 연습해 본 적이 없어서 이번에는 많은 문제를 발견해서 기록해 두었습니다. 이제 새로 온 사람들이 사용할 수 있기를 바랍니다. jsonp 급우들의 도움을 받으세요!

jsonp가 무엇인지, 왜 jsonp가 사용되는지에 대해서는 더 이상 말하지 않겠습니다. 이해하지 못하는 학생들은 Baidu에서 검색할 수 있습니다.

먼저 jQuery의 jsonp 요청에 대해 이야기해 보겠습니다. vue-resource에서 jsonp를 이해하는 것이 쉬울 것입니다.

여기에서는 json 데이터를 예로 들어보겠습니다. 먼저 $.get을 통해 원하는 객체를 직접 얻을 수 있지만 jsonp를 사용하면 다음과 같은 오류 코드가 나타납니다.

$.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)
 }
})

로그인 후 복사

이때 예상한 대로 데이터가 출력되지 않고 오류가 보고되었습니다.

이때 네트워크를 확인해보니 실제로 데이터가 요청된 것을 확인할 수 있습니다

요청이 성공했고, 상태 코드가 200이고, 데이터가 반환된 것을 알 수 있는데, 왜 아직도 오류를 보고하고 있나요?

이를 위해서는 jsonp의 원리를 분석해야 합니다.

먼저 ajax를 보낼 때 일반적으로 json 데이터 조각을 얻습니다. 하지만 현재로서는 JS가 json 데이터를 직접 조작하는 것이 편리하지 않습니다. , jQuery가 자동으로 도움이 되었습니다. 우리는 이를 JS 개체로 구문 분석했습니다.

우리 모두는 jsonp가 실제로 JavaScript를 사용하여 스크립트를 로드하여 데이터를 로드하는 것과 동일하다는 것을 알고 있습니다

이 시점에서 일부 학생들은 오류가 왜 발생하는지 이해했을 것입니다. 사실 이때는 페이지에 직접 스크립트를 추가했을 뿐이고, 그 안의 내용은 우리에게 반환된 데이터입니다

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

로그인 후 복사

자, 다시 생각해 보면 이 JavaScript 코드는 사실상 의미 없는 객체입니다. 변수를 할당하지 않으면 얻을 수 없습니다. 따라서 지금은 백엔드 동료의 협력이 필요합니다. 이 시점에서는 모든 사람이 이를 수행하는 방법을 이해해야 한다고 생각하므로 jQuery의 ajax에 대해서는 더 이상 언급하지 않겠습니다.

오늘 우리는 주로 vue-resource의 jsonp 도메인 간 요청 문제에 대해 이야기하고 있습니다.

더 이상 고민하지 말고 바로 코드로 넘어가겠습니다.

var vm = new Vue({
 el:&#39;#signRecord&#39;,
 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 오류가 발생했습니다. 네트워크를 다시 살펴보겠습니다

동일한 요청이 성공하여 데이터를 얻었으나 오류가 보고되었습니다. 요청 헤더를 주의 깊게 살펴보면 추가 매개변수

이 매개변수의 용도가 무엇인가요? 소스 코드를 살펴보겠습니다

여기서 콜백이 실제로 무작위로 생성된 문자열임을 알 수 있으며, 이 매개변수 이름을 직접 지정하지 않을 경우 기본값은 "콜백"입니다.

기본적으로 전달되는 매개변수는 확실히 유용합니다.

사실 vue가 jsonp를 보내는 데에는 두 가지 매개변수가 있습니다. 살펴보겠습니다

Vue.http.jsonp(url,{params: {pageID:29},jsonp:"_callback"}) //这步就是关键，改callback名

로그인 후 복사

여기서 params는 전송할 데이터 객체이고 jsonp는 콜백의 이름입니다. 설정되지 않음, 기본값은 콜백), 이제 우리가 보낸 "_callpack"의 값을 가져오고 이 값을 반환된 json 데이터에 연결하기 위해 배경 지원이

필요합니다. 그게 전부입니다!

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.