axios クロスドメインリクエストデータインスタンスを使用した Vue の詳細説明

axios には、デフォルトでは jsonp クロスドメイン リクエスト メソッドがありません。一般に、一般的なアプローチは、クロスドメインの問題をバックグラウンドで解決することです。つまり、バックエンド開発者がクロスドメイン ヘッダー情報を追加します。この記事では主に、axios を使用してドメイン間でデータをリクエストする際の Vue の問題について詳しく紹介します。興味のある方は参考にしていただければ幸いです。

たとえば、Java の

header,response.setHeader("Access-Control-Allow-Origin", www.allow-domain.com)

ですが、多くの場合、バックエンドは何らかの理由でそれを変更したくない場合や、すでに jsonp インターフェースを作成しており、この時点でフロントエンドが導入する可能性があります。依存関係だけで問題を解決します。

依存関係を導入する

cnpm install jsonp

vueファイルにインポートする

import jsonp from 'jsonp'

使用方法(npmでjsonpのドキュメントを参照できます)

jsonp("http://cross-domain.com",//替换网址
  {
    //jsonp的回调函数名
    name: 'success_jsonpCallback'
  },

  //注意第一个参数是 err，第二个参数是 data
  function (err, data) { 
    console.log(data);
  });

関連する推奨事項:

クロスにaxiosを使用するためのvue2.0の設定について-ドメインリクエスト

Vue2.0 axios フロントエンドおよびバックエンドログインインターセプター

最も完全な axios 戦略

以上がaxios クロスドメインリクエストデータインスタンスを使用した Vue の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。