Vue をオンラインでデプロイしてクロスドメインの問題を解決する

Vue.js は、シングル ページ アプリケーション (SPA) を構築するための人気のある JavaScript フレームワークです。 Vue アプリケーションを開発する場合、クロスドメインの問題が発生する可能性があります。クロスドメインの問題により、ブラウザーが異なるオリジンからリソースを読み込めなくなることがよくあります。実際、Vue アプリケーションをデプロイする場合、クロスドメインの問題がさまざまな面でボトルネックになる可能性があります。この記事では、クロスドメインの問題を解決する方法に焦点を当てながら、Vue.js のデプロイメントを紹介します。

クロスドメインとは何ですか?

ブラウザでは、Web ページのドキュメント ツリーでスクリプトが実行されると、実行されたスクリプトはドキュメント ツリーの任意の部分にアクセスできます。ただし、異なるソースからリソースにアクセスしようとすると、クロスドメインの問題が発生します。

ソース

ソースとは、ネットワーク内のサーバーまたはクライアントを指し、IP アドレス、ドメイン名、またはポート番号を指定できます。ブラウザは、ソースのコンポーネントを比較してクロスドメインかどうかを判断することにより、2 つの URL が同じかどうかを判断します。

たとえば、次の URL があるとします。

http://www.example.com/page1
https://www.example.com/page2
http://www.example.com:8080/page3

それぞれの URL には、プロトコル、ホスト、ポート番号という 3 つのコンポーネントが含まれています。この例では、1 番目と 3 番目の URL のプロトコルとホストは同じですが、ポート番号が異なります。ポート番号が異なるため、これらの URL は異なるソースとみなされます。

クロスドメイン

JavaScript スクリプトが他のソースからリソースにアクセスしようとすると、ブラウザーは同一生成元ポリシーに従ってスクリプトの実行をブロックします。ブラウザーは、これにより悪意のあるスクリプトによるデータの盗難が防止されると考えています。

たとえば、Vue.js アプリケーション内のコンポーネントの JavaScript コードが別のソースから API にアクセスしようとすると、アプリケーションはブラウザーに対してクロスオリジン リクエストを作成します。クロスドメインの問題が解決されない場合、ブラウザーはアプリケーションが他のソースから必要なリソースをロードできなくなります。

クロスドメイン問題の解決

Vue.js アプリケーションのクロスドメイン問題を解決するには、バックエンド API クロスドメイン、フロントエンド パッケージ化された静的などの複数の側面を考慮する必要があります。クロスドメインのリソースなどについては、個別に説明します。

バックエンド API クロスドメイン

Vue.js アプリケーションでは、API がフロントエンド アプリケーションと対話する必要があります。これらの API が異なるドメインにある場合は、クロスドメインを実行する必要があります。この問題は、次の方法で解決できます:

1. Access-Control-Allow-Origin HTTP ヘッダーを使用する

API サーバーで Access-Control-Allow-Origin ヘッダーを設定することにより、一方、ブラウザーは、信頼できるリバース プロキシ サーバーのアドレスを指定することで、クロスドメインの問題を解決できます。

Access-Control-Allow-Origin HTTP ヘッダーは、サーバーによって信頼されるドメイン名を識別します。このヘッダーにクライアントからリクエストされたアドレスが含まれている場合、API サーバーはリクエストの通過を許可します。

Access-Control-Allow-Origin: http://your-domain.com/

すべてのドメイン名が API にアクセスできるようにするには、ワイルドカードを使用できます。

Access-Control-Allow-Origin: *

このソリューションは非常にシンプルですが、制限が非常に厳しく、ほとんどのアプリケーションには適していません。

2. リバース プロキシ サーバーの追加

どのリクエストがリバース プロキシを通過できるかをより適切に制御するために、Nginx などのリバース プロキシ サーバーを使用できます。リバース プロキシ サーバーは、リモート サーバー (API サーバーなど) からデータを取得してクライアントに返すために使用されます。

リバース プロキシを使用する場合、API サーバーはインターネットに公開されません。代わりに、クライアントはリバース プロキシにリクエストを送信し、そこからデータを取得します。リバース プロキシ サーバーは、どのリクエストがリクエスト パイプラインを通過するかを制御します。

たとえば、Vue.js アプリケーションの特定の API の場合、次の Nginx サーバー構成を設定できます:

location /api/ {
   proxy_pass http://your-api-server.com/;
   add_header 'Access-Control-Allow-Origin' 'http://your-domain.com/';
}

上記の設定では、すべてのパスを /api/* に指定します。 リクエストは API サーバーに転送されます。ドメイン名 your-domain.com を持つユーザーからリクエストが送信されると、リバース プロキシ サーバーはリクエストの通過を許可します。このドメインからのリクエストのみが許可されます。他のドメイン名は拒否されます。

フロントエンド アプリケーションのデプロイ後にドメイン間で静的リソースをパッケージ化する

Vue.js アプリケーションは実稼働環境で静的ファイルとしてパッケージ化され、アプリケーションが配置されているサーバーにデプロイされます。フロントエンド アプリケーションと API が別のサーバーにデプロイされている場合、この状況が発生した場合は、次のことを行う必要があります:

1. Vue 設定ファイルに publicPath

packaging を追加します。 -end 静的コードは、publicPath が設定されていない場合、相対パスを通じて関連リソースを参照します。相対パスのインポート方法では、「./」、「../」などを使用して、インポートされたリソースのパス識別子を表します。これらの識別子で表されるパスは、コード ファイルに対してのみ相対的です。

パッケージ化された静的リソースでは、リソース パスが相対パスとしてアクセスされることがわかります。パッケージ化されたコードを他のサーバーに直接コピーしてアクセスすると、アクセスの問題が発生することがわかります。

この問題を解決するには、静的ファイルをパッケージ化するときに publicPath を追加し、すべてのパスを絶対パスに変更する必要があります。

デプロイの前に、vue.config.js ファイルを開いて、publicPath アドレスを追加します。例:

module.exports = {
    publicPath: 'http://cdn.example.com/vue-app'
}

この構成は、静的リソースの生成時に publicPath をカスタム アドレスとして構成するように Webpack に指示します。これにより、他のドメイン名にアクセスするときに、CDN リソースを通じてコードを直接読み込むことができ、クロスの問題が解決されます。ドメイン リソース リクエスト。

2. 設定CORS規則

在靜態資源和API資源都在CDN網域下的時候需要設定CORS規則，而不是使用Nginx反向代理，因為Nginx在這種情況下一般還會有一層CDN加速。

在CDN控制台上進行跨域CORS規則的設置，開啟Access-Control-Allow-Origin頭, 允許前端程式碼的存取靜態資源，解決資源存取跨域問題。

結論

開發Vue.js應用程式時，解決跨域問題是一個重要的環節。這篇文章詳細介紹了在Vue.js中如何解決跨域問題。我們需要針對不同的場景進行不同的跨域解決方案，透過理解和掌握跨域問題，可以有效地提高Vue.js應用程式的效能和可靠性。

以上がVue をオンラインでデプロイしてクロスドメインの問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。