オリジンサーバーへのHTTPリクエスト

Question

私は別個のバックエンドとフロントエンドのソフトウェアを使ってWebアプリケーションを開発しています。どちらも同じサーバーから、異なるポート（それぞれ80と3000）で提供されています。

フロントエンドアプリケーション（Vue.jsで開発された）は、HTTP要求を介してバックエンドサーバーと通信します。私はAxiosライブラリを使ってこれらのリクエストを送信しています。

問題は、このWebアプリケーションのインスタンス（フォントエンドとバックエンドの両方を含む）が顧客ごとに異なる複数のサーバーに展開され、これらの各インスタンスでサーバーアドレスがハードコードされているようです最高の解決策ではありません。

フロントエンドアプリケーションでAxiosを設定して、HTTPリクエストを提供しているのと同じアドレスにHTTPリクエストを送信するにはどうすればよいですか？ example2.comから提供されたインスタンスがhttp://example2.com:3000に要求を送信する必要がありながら

例えばexample.comから提供されたインスタンスはhttp://example.com:3000にリクエストを送信する必要があります。

Answer 1

location.hostプロパティを使用できます。 Locationは、URLでの操作を処理するためのAPIです。そのhostプロパティには、Webサイトの現在のホストURLが含まれています。たとえば、コンソールlocation.hostにstackoverflowを入力すると、stackoverflow.comが表示されます。あなたは、例えば、API baseUrlににマップする既存の各フロントエンドのURLのマッピングを書くことができます。

const mapping = { 
    'example.com': 'api.example.com', 
    'example2.com': 'api.example2.com' 
}; 

function findApiUrl(){ 
    return mapping[location.host]; 
} 

const baseUrl = findApiUrl(); // pass it to axios