vue での axios インターセプターの使用の詳細な図による説明

今回は、vue での axios インターセプターの使用について、画像とテキストを使って詳しく説明します。 以下は、vue で axios インターセプターを使用する際の 注意事項 についてです。

vue の axios は vue.use() メソッド宣言をサポートしていません。 したがって、これを解決するには 2 つの方法があります:

1 つ目の方法: main.js に axios を導入し、それを vue プロトタイプ チェーンのプロパティとして設定して、それを vue プロトタイプ チェーンで使用できるようにします。コンポーネント this.axios は

import axios from 'axios';
Vue.prototype.axios=axios;

コンポーネントを直接使用します:

this.axios({
    url:"a.xxx",
    method:'post',
    data:{
      id:3,
      name:'jack'
    }
  })
  .then(function(res){
    console.log(res);
  })
  .catch(function(err){
    console.log(err);
  })
 }

ここで注意すべき点の 1 つは、リクエストされたデータを axios のデータにコピーするために this を使用するのは無効であるということです。これはアロー関数を使用することで解決できます。

vue cli スキャフォールディング フロントエンドがバックエンド データ インターフェイスを調整するときのローカル プロキシのクロスドメインの問題。たとえば、ローカルホスト http://10.1.5.11:8080/xxx/duty?time= のインターフェイスにアクセスします。 2017-07-07 14:57 :22' は、ドメイン間でのみアクセスできます。直接アクセスした場合、XMLHTTPRequest は http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14 を読み込むことができません。 :57:22' 。プリフライト要求への応答がアクセス制御を通過しません…

なぜクロスドメインの問題が発生するのでしょうか?これは独自の通信ではないため、詳細については Google にアクセスしてください。ここでは、次のように webpack で proxyTable を設定するだけです:

config/index.js

dev: {
  proxyTable: {
   '/api': {
    target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号 
    changeOrigin: true,   //跨域
    pathRewrite: {
     '^/api': '/'     //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'，直接写‘/api/xxx/duty?time=2017-07-07 14:57:22'即可
    }
   }

クロスドメインは成功しましたが、これは開発環境 (dev) でのクロスドメインの問題のみを解決します。実際に運用環境のサーバーにデプロイされた場合でも、同じサーバーからのものでない場合は、依然としてクロスドメインの問題が発生します。たとえば、デプロイしたサーバー ポートは 3001 で、最初のステップでは、config/dev.env の 2 つの環境でフロント エンドをテストできます。 js と prod.env.js、つまり開発/本番環境では、要求されたアドレス API_HOST と開発環境をそれぞれ設定します。上記で設定したプロキシ アドレス API を使用し、本番環境では通常のインターフェイス アドレスを使用します。このように設定します。config/dev.env.js と prod.env.js の 2 つのファイルで次の設定を行います。

config/dev.env.js:

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',//开发环境
 API_HOST:"/api/"
})

prod.env.js

module.exports = {
 NODE_ENV: '"production"',//生产环境
 API_HOST:'"http://10.1.5.11:8080/"'
}

もちろん、開発環境でも本番環境でも、http://10.1.5.11:8080/ を直接リクエストできます。 /。構成後、プログラムはテスト中に開発環境か運用環境かを自動的に判断し、API_HOST を自動的に照合します。任意のコンポーネントで process.env.API_HOST を使用して、次のようなアドレスを使用できます。バックエンドサーバーを設定することです。クロスドメインに cro を使用するだけです。つまり、access-control-allow-origin: * はすべてのアクセスを許可することを意味します。要約すると、開発環境では、フロントエンドがクロスドメインにプロキシを構成できます。実際の運用環境では、バックエンドの協力が必要です。ある専門家は、「この方法は ie9 以下では使いにくいです。互換性が必要な場合、開発中に Webpack プロキシと同様の効果が得られるように、バックエンドのサーバー ポートにプロキシを追加するのが最善の方法です。」と述べています。

axios sends get

post request問題 post リクエストを送信するときは、通常、送信するコンテンツのタイプである Content-Type を設定する必要があります。application/json は、json オブジェクトを送信することを指しますが、それを文字列化します。前進。 application/xxxx-form は送信を指しますか? a=b&c=d 形式の場合は、qs メソッドを使用して形式を設定できます。qs は、axios のインストール後に自動的にインストールされます。コンポーネントにインポートするだけです。

instance.post(process.env.API_HOST+'user/login', this.form)

インターセプタの使用アドレスページにアクセスすると、再度ページにアクセスする前に再度ログインするよう求められることがあります。これは、トークンが失われているなど、ID 認証が失敗したことを意味します。トークンはまだ存在します ローカルに存在しますが、無効であるため、ローカルにトークン値があるかどうかを単純に判断するだけでは問題を解決できません。このとき、サーバーはリクエスト時に 401 エラーを返し、承認エラー、つまりページにアクセスする権限がないことを示します。

すべてのリクエストを送信する前、サーバーの応答データを操作する前に、この状況をフィルタリングできます。

const postData=JSON.stringify(this.formCustomer);
'Content-Type':'application/json'}
const postData=Qs.stringify(this.formCustomer);//过滤成？&=格式
'Content-Type':'application/xxxx-form'}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS は星空ナビゲーション バーをどのように実装するか

vue と vue-i18n はバックグラウンド データの多言語切り替えをどのように実装するか

以上がvue での axios インターセプターの使用の詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。