vue-resourceとJSONPの動作例

Question

私は、vue-resourceを使用してJSONP要求を行うのに苦労しています。誰でも、jsonpコールバックを定義し、Vueコンポーネント内でコールを処理するなどの適切な方法を示すいくつかの実例を提供できます。

おかげ

** EDIT：**他の仲間のために、のような状況を少し明確にしましょう。何がポイントだったのですか？私はサイト上で認証されていないユーザーを抱えており、認証が必要なアクション（例：投稿を作成）をさせてもらいました。しかし、投稿を作成する最後の段階で、私は彼にモーダルウィンドウにサインインして、社会的な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 
});