vue-resource 및 JSONP 작업 예제

Question

vue-resource를 사용하여 JSONP 요청을 만드는 데 어려움을 겪고 있습니다. 누구나 jsonp 콜백을 정의하고 Vue 구성 요소 내에서 호출을 처리하는 적절한 방법을 보여주는 몇 가지 작업 예제를 제공 할 수 있습니까?

감사

** 편집 : ** 다른 동료를 들어, 상황을 조금 명확히하자. 요점은 무엇입니까 - 사이트에서 인증되지 않은 사용자가 있고 인증을 요구하는 작업 (예 : 게시물 작성)을 수행하도록하고 싶습니다. 그러나 게시물을 작성하는 마지막 단계에서 모달 창에 로그인하고 싶었지만 소셜 oAuth 공급자를 사용하여 로그인하고 로그인에 성공하면 게시물이 승인되도록하는 등의 작업을했습니다. 문제는 프런트 엔드에서 다른 도메인 (소셜 공급자)을 향한이 호출이 (CORS 문제) 차단되었고 JSONP를 사용하여 장애물을 극복하려고 시도한 것보다 낫습니다. JSONP 호출을 설정하는 데는 많은 시간이 소요되었지만 마침내 전적으로 다른 접근 방식을 사용하기로 결정했습니다.

게시물 작성 프로세스가 끝나면 쿠키가 작성되어 정보가 무엇인지 필요한 모든 세부 사항으로 중단 된 행동. 그런 다음 로그인 모달이 표시됩니다. 전체 로그인 과정은 서버 측에서 이루어지며 마지막에는 사용자 신원이 확인되면 초기 페이지로 리디렉션됩니다. 또한 쿠키가 검사되고 데이터를 기반으로 사용자가 지금 인증 되었기 때문에 중단 된 작업이 성공적으로 실행을 계속합니다.

@bryceadams 님이 답변에 다시 한 번 감사드립니다!

Answer 1

구성 요소에서 처리하는 방법은 구현에 따라 다르지만 일반적으로 양식이있는 경우처럼 method에서 완료되며 JSONP 요청을 한 메서드를 호출 한 양식을 제출할 때처럼 수행됩니다.

다음은입니다. 중요한 부분은 콜백을 설정하는 jsonp 옵션입니다. 이는 요청하는 위치에 따라 다를 수 있습니다. 종종 callback이 될 것이지만, 제 경우에는 MailChimp와 협력하여 c입니다.

var options = { 
    jsonp: 'c' 
} 

this.$http.jsonp('https://website.com', options).then(function(data){ 
    console.log(data.json()); 
}, function(error) { 
    // handle errors 
});