Vueにaxiosを挿入する 'axios' から axios をインポートします。 Vue.prototype.$axios = axios; 'axios' から axios をインポートします axios.defaults.timeout = 5000; //応答時間 axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8'; //リクエストヘッダーを構成する axios.defaults.withCredentials= true; //Cookieあり axios.defaults.baseURL = 'http://localhost:8080/'; //インターフェースアドレスの設定 //POSTパラメータのシリアル化(リクエストインターセプターの追加) axios.interceptors.request.use((config) => { // バックエンドに応じて、ここでシリアル化コードを追加できます。私が使用する SSM バックエンドは Json オブジェクトを受け入れます。シリアル化が必要な場合は、qs コンポーネント return config を使用できます。 },(エラー) =>{ console.log('間違ったパラメータが渡されました') Promise.reject(error) を返します。 }); //ステータス判定を返す(レスポンスインターセプターを追加) axios.interceptors.response.use((res) => { // 応答データを使って何かする if (!res.data.success) { Promise.resolve(res) を返します。 } res を返します。 }, (エラー) => { console.log('ネットワーク異常') Promise.reject(error) を返します。 }); // Promise を返す (POST リクエストを送信する) エクスポート関数 fetchPost(url, params) { 新しい Promise を返します ((resolve, reject) => { axios.post(url, パラメータ) .then(応答 => { 解決(応答); }, エラー => { 拒否(エラー); }) .catch((エラー) => { 拒否(エラー) }) }) } Promise を返す (get リクエストを送信する) エクスポート関数 fetchGet(url, param) { 新しい Promise を返します ((resolve, reject) => { axios.get(url, {params: param}) .then(応答 => { 解決(応答) }, エラー => { 拒否(エラー) }) .catch((エラー) => { 拒否(エラー) }) }) } エクスポートデフォルト{ フェッチポスト、 取得、 } 簡単なテスト: loginPost: 関数() { パラメータ = { 'パスワード': '123', 'ユーザー名': 'admin' } http.fetchPost('/login', params).then((データ) => { コンソール.log(データ) }).catch(エラー => { コンソール.log(エラー) }) }, こんにちは: 関数() { http.fetchGet('/hello', "").then((データ) => { コンソール.log(データ) }).catch(エラー => { コンソール.log(エラー) }) }, 投稿リクエスト: リクエストを取得: クロスドメインの問題、バックエンドの構成は次のとおりです。 SpringMVC.xml でクロスドメインを構成します。 <!-- インターフェースのクロスドメイン構成 --> <mvc:cors> <!-- allowed-methods="*" --> <!-- すべてのリクエストが有効であることを意味します --> <mvc:mapping path="/**" allowed-origins="*" 許可されるメソッド="POST、GET、OPTIONS、DELETE、PUT" allowed-headers="コンテンツタイプ、アクセス制御許可ヘッダー、認証、X-Requested-With" 許可資格情報="true"/> </mvc:cors><!-- インターフェースのクロスドメイン構成 --> インターフェース構成: Vue で設定する vue.config.js を作成します。 モジュール.エクスポート = { 開発サーバー: { プロキシ: { '/api': { ターゲット: 'http://127.0.0.1:8080', // 仮想サーバーがローカルに作成され、要求されたデータが同時に送受信されるため、サーバーとサーバーが相互にやり取りするときにクロスドメインの問題は発生しません。changeOrigin: true、 ws: 真、 パス書き換え: { '^/api': '' // ターゲット内のリクエスト アドレスを置き換えます。つまり、今後 http://api.jisuapi.com/XXXXX のアドレスをリクエストする場合は、/api と記述するだけです。} } } } } バックエンドも正常にクッキーを取得できます。 もちろん、次の設定に注意してください。これがクッキーの理由です axios.defaults.withCredentials = true; 要約する これで、axios を vue で簡単にカプセル化する方法についての記事は終わりです。より関連性の高い vue カプセル化 axios コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL ステートメントに一重引用符またはバックスラッシュを含む値を挿入する方法
>>: Centos に MYSQL8.X をインストールするチュートリアル
ページを作成するときに、記述した CSS スタイルが有効にならないことがあります。この現象にはさまざ...
この記事では、Linux 環境での ActiveMQ の展開方法について説明します。ご参考までに、詳...
目次繰り返しレンダリングループを避ける副作用の除去についてReact16.8 の新しい useEff...
1. コンテナとは、独立して実行されるアプリケーション、またはアプリケーションのグループとその動作環...
Web ページを設計する過程で、デザイナーが間違いを犯すのは必然です。特に新人は、新しいアイデアを実...
目次MySQLを初期化するMySQL サービスをインストール + MySQL サービスを開始MySQ...
vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...
1. なぜこの記事を書くのですか?重複リクエストの処理に関する記事をたくさん読んだことがあるでしょう...
目次1. 部分文字列() 2. サブストラクチャ() 3.インデックス() 4.最後のインデックス(...
1. 背景ボタンは非常によく使われており、Element のボタン機能は非常に包括的です。この記事で...
Alpine イメージの telnet はバージョン 3.7 以降、busybox-extras パ...
記事の構成1. 準備2. Java JDK8.0をインストールする3. 環境変数を設定する3. イン...
目次導入配列の作成作成方法詳しい説明方法参加する() push() と pop() shift() ...
Dockerコンテナのインストール時に遭遇しやすい2つの問題1.ポートはすでに割り当てられています(...
目次1. 現象2. 解決策3. 要約: 1. 現象1. 要件: 特定の表示ページをキャプチャしてアル...