問題タブ [vue-resource]

私は VueJS を使用しており、プラグイン vue-resource を使用してリクエストを作成していますが、FormData を使用してサーバーに送信しようとすると、IE11 で機能しないのはなぜですか?

コードは次のとおりです。

手伝って頂けますか？ありがとうございました！

ビューリソース:

私のAPIはCORS laravelで適切に構成されています..

そのエラーが発生します：

リクエスト ヘッダー:

私はどこで間違っているのですか？:(

ありがとう！

vue-resource を使用して JSONP リクエストを行うのに苦労しています。jsonpコールバックを定義する適切な方法、Vueコンポーネント内での呼び出しの処理などを示す実際の例を誰かが提供できますか?

ありがとう

**編集:** 他のフェローのために、状況を少し明確にしましょう。ポイントは何でしたか-サイトに認証されていないユーザーがいて、認証が必要なアクション（投稿の作成など）を彼に実行させたいと思いました。ただし、投稿を作成する最後に、彼にサインイン モーダル ウィンドウを表示し、ソーシャル oAuth プロバイダーを使用してログインさせ、ログインに成功したら、投稿が承認されるようにしたいと考えました。問題は、フロントエンドからさまざまなドメイン (ソーシャル プロバイダー) へのこの呼び出しがブロックされたこと (CORS 問題) であり、JSONP を使用して障害を克服しようとしたことです。JSONP 呼び出しをセットアップしようとすると、非常に多くの時間が費やされ、最終的にはまったく異なるアプローチを採用することにしました。

投稿を作成するプロセスの最後に、必要なすべての詳細で中断されたアクションが何であったかを考慮して、Cookie が作成されます。その後、ログインモーダルが表示されます。ログイン処理はすべてサーバー側で行い、最後にユーザーの身元が確認されると初期ページへのリダイレクトを行います。さらに、Cookie がチェックされ、データに基づいて、ユーザーが現在認証されているため、中断されたアクションが正常に実行され続けます。

@bryceadams回答ありがとうございます！

データテーブルに問題があります.vuejsリクエストから返されたデータを表示するために使用していますが、2番目のリクエストを行った後、データを取得して並べ替えることができません.

私の最初のリクエストは、このようにデータをうまく返します

ここからデータを取得した後、テーブルは正常に作成され、適切に並べ替えることができますが、新しい要求を行うとテーブルが壊れ、テーブルにデータが入力されますが、並べ替えをクリックすると初期値のみが表示されます最初のリクエストからのデータ。

これにより、最初にデータを削除してテーブルを破棄する必要があると信じるようになりましたが、何もしていないようです。

助けていただければ幸いです。さらに必要な情報が提供されます。ありがとうございます

編集:私が基本的に必要とするのは、テーブルを再初期化することを知ることです。これにより、渡す新しい値が入力された新しいテーブルになります。

私はlaravel（5.2）とvueを初めて使用しています。データベースからビューにデータを渡そうとしています。私の正しいルートは問題ないようで、json データの応答を受け取りますが、データをコンソールまたはビューに記録するのに問題があります。私が間違っていることを教えてください。

これが .vue ファイルに保存された私の ShowEvent コンポーネントです

これが私のmain.jsファイルです

そして、これはビューファイルです

モデルにバインドしてヘッダー値を変更しようとしています。

ここtokenIdには正しい値がありますが、 から変更してもinputには影響しません$http.headers.common['X-Vault-Token']。

使おうと思っているのです$watchが、こちらはどう使うのでしょうか？

vue-resource で API 呼び出しを行う、作成したサービスをテストしようとしています。サービスは呼び出しを行い、コンポーネントを新しいデータで更新する必要がありますが、私のテストでは更新された値を登録しません。vue-cli webpack の例と同じセットアップを使用しており、認証サービスをこのリポジトリに基づいています (残念ながらテストはありません)。

私のサービス:

私のテスト：

テストを実行すると、「」が「何らかのエラー」に等しいと予想されるため、失敗します。

私の疑いは、vue-resource が promise を使用しているという事実に関連しています。

ルーターをインストールする前に、グローバル Vue インスタンスをセットアップし、次のように vue-resource を使用しました。

現在、Vue インスタンスはルーター自体によって次のようにインスタンス化されています。

インスタンスに変数がバインドされていない場合、どのように vue-resource を使用できますか?

Cloudflare をプロキシとして使用する Heroku にデプロイされたサイトがあります。

一部のフロントエンドの動作については、Vue-resource で Vue を使用していくつかの ajax リクエストを実行しています。Content-Type:application/json応答は、ヘッダー付きの JSON 形式です。

奇妙なことに、これは予想される動作であるにもかかわらず、応答が vue-resource によって JavaScript 配列/オブジェクトに解析されていないため、スクリプトでエラーが発生します。ただし、この問題は Cloudflare URL 経由でサイトにアクセスした場合にのみ発生します。Heroku の URL (例: foo-bar-1234.herokuapp.com) からアクセスすると、すべて正常に動作します。また、私のローカル開発環境 (Vagrant、Nginx) でも問題なく動作しています。

この問題は Chrome でのみ発生します。Cloudflare かどうかに関係なく、Safari と Firefox で問題なく動作します。

問題は、Heroku サーバーからの応答に対して CloudFlare が行っていることで、Chrome の Vue リソースが応答を適切に解析するのを妨げていることにあると思います。

参考までに、CloudFlare が提供するリクエストからのレスポンスを次に示します。

対heroku提供のもの：

ヘッダーはかなり似ているように見えるので、これを引き起こす方法で応答がどのように異なるかはわかりません...

デバッグの提案をいただければ幸いです。

更新: コンパイルされた JavaScript はここで確認できます (大きなファイル): https://github.com/samarkanddesign/samarkand-web/blob/master/public/js/admin.js

これは大きなファイルなので、リポジトリを確認することをお勧めします: https://github.com/samarkanddesign/samarkand-web/tree/master/resources/assets/js

更新 2 : 両方の状況で実行される vue-resource ajax リクエストの例:

1. クラウドフレア

2. Heroku から直接:

Heroku の例では、応答dataがオブジェクトの配列として解決されているのに対し、CloudFlare では文字列であることがわかります。