Vue プロジェクト開発におけるクロスドメインリクエスト処理の経験を共有する

フロントエンド テクノロジの継続的な開発と普及に伴い、その 1 つとして Vue がますます注目され、応用されるようになりました。 Vue プロジェクトの開発では、クロスドメインリクエストの問題がよく発生しますが、プロジェクトを正常に実行するにはどうすればよいでしょうか?この記事では、個人的な経験に基づいて、Vue プロジェクト開発におけるクロスドメイン要求処理の経験をいくつか紹介します。

まず第一に、クロスドメイン リクエストとは何ですか?簡単に言うと、あるドメイン名の Web ページは、別のドメイン名のリソースにアクセスできません。具体的には、フロントエンドとバックエンドが分離されている場合、フロントエンド アプリケーション (Vue アプリケーションなど) がバックエンド API へのリクエストを開始すると、両者は異なるドメイン名の下にあるため、制限されます。ブラウザの同一オリジンポリシーにより正常にアクセスできません。現時点では、クロスドメインリクエストを処理するために何らかの手段を使用する必要があります。

1. プロキシを使用する

クロスドメイン リクエストを処理する一般的な方法の 1 つは、プロキシを使用することです。つまり、Vue アプリケーションの構成ファイルにプロキシ サーバーのアドレスを設定し、最初にプロキシ サーバーへのリクエストを開始し、次にプロキシ サーバーがそれをバックエンド API に転送します。このようにして、フロントエンド アプリケーションは通常、バックエンド API にデータを要求できます。 Vue プロジェクトでは、vue.config.jsで次の設定を行うことができます。

module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '/api': '/' } } } } }

このうち、targetパラメーターはバックエンドのアドレスを指します。 API、changeOriginは、リクエスト ヘッダーのOrigin属性を変更するかどうかを示します。pathRewriteは、リクエスト パスを書き換えるために使用され、で始まるパスを置き換えます。 /api(パスは/で始まります)。

2. JSONP の使用

JSONP (パディング付き JSON) は、