vue-cli開発時のajaxドメイン間の詳細な解決方法

目的:vue-cliで構築したプロジェクトを使用して、開発時にバックグラウンドインタフェースにアクセスしてデータを取得しようとすると、ドメイン間で問題が発生します。

config/index.jsでは以下の構成を行う

ajaxリクエストを行う場合、アドレスのうち/apiで始まるリクエストアドレスはいずれもターゲットアドレスとして解析され、targetはあなたが望むバックグラウンドインタフェースアドレスです.

proxyTable: {
      '/api': {
        target: 'https://188.188.18.8',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

vue-resource呼び出しの例

	this.$http.get('/api/v4/user/login', [options]).then(function(response){
	    //       
	}, function(response){
	    //       
	});

axios呼び出し例

	  axios({
	    method: 'get',
	    headers: {'Accept': '*/*'},
	    url: '/api/v4/user/login',
	    data: options
	  })
	  .then(function (response) {
	    console.log(response.data)
	  })
	  .catch(function (error) {
	    console.log(error)
	  })

ドメイン間原理():

本来ブラウザによって開始するhttpリクエストは、ローカルサーバ側にhttpリクエスト

を開始する.
ドメイン間はブラウザで禁止されており、サービス側はドメイン間を禁止していない.
我々のhttpリクエストは,最初からブラウザによって開始され,ローカルサービス側によって開始されるようになったが,サービス側からサービス側へのデータ伝送にはドメイン間問題が存在しないため,解決した.
エージェントが設定されていない場合の通信原理:ローカルファイル-ブラウザ-リモートサービス側エージェントが設定されている場合の通信原理:ローカルファイル-ブラウザ-ローカルサービス側-リモートサービス側

説明の原理：

構成でtargetを構成する項目:target:'https://188.188.18.8’インタフェースが呼び出された場合、例えば、上のvue-resource例.最初のアドレスパラメータは、/api/v4/user/loginであり、ローカルサーバによってhttps://188.188.18.8/v4/user/loginに自動的に解析されます.これは私たちが必要とするアドレスです.
ブラウザでページを開く.ajaxを介してリクエストを開始すると、ローカル・サービス・エンドのアドレス(通常はlocalhost:8080または127.0.0.1:8080)が先にこのリクエストを受信し、ローカル・サービス・エンドはこのリクエストのアドレス文字列を分析します.アドレス文字列の前の部分が/apiである場合、ローカルサーバはapiインタフェースの文字列を一度に置き換え、https://188.188.18.8/v4/(構成アドレス)+user/login(インタフェース呼び出し方法の詳細アドレス)、ターゲットアドレス(https://188.188.18.8/v4/).サーバ上の、現在のサーバ上のファイルが要求を開始し、サーバ上の他のものを取得することは、ドメイン間ではありません.