Axios は Vue のクロスドメインの問題とインターセプターの使用方法を解決します

今度は、axios を使用して Vue でクロスドメインの問題とインターセプターを解決する方法に関する記事を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

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 プロキシと同様の効果が得られるように、バックエンドのサーバー ポートにプロキシを追加するのが最善の方法です。」と述べています。

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 エラーを返し、承認エラー、つまりページにアクセスする権限がないことを示します。

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

以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

以上がAxios は Vue のクロスドメインの問題とインターセプターの使用方法を解決しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。