序文：クロスドメインリクエストは、ローカル開発で頻繁に発生する要件であり、数行のコード構成で非常に簡単です。最初にクロスドメインリクエストを構成したとき、公式の説明は簡潔すぎて、見つけたチュートリアルは古くなっています。少しデバッグしても問題は解決しませんでした。結局、問題の解決には多くの時間と労力を要しました。したがって、別のプロジェクトを取り上げて、ゼロからやり直してください。あくまでもチュートリアルであることをあえて言わないでください。
注：この記事のプロジェクトは、Vue CLI ^ 4.3.0、Node.js v12.13.0に基づいています。また、〜4.16.1を表します。インストールされていない場合は、最初にインストールする必要があるため、後で説明しません。
1.デスクトップでcmdを実行し、コマンドvue create demoを使用して、vueプロジェクトのデモ、プラグインの依存関係などを作成します。デフォルトの構成を使用します。
2.プロジェクトが正常に作成されたら、コマンドcd demoを使用してdemoフォルダーに入り、コマンドnpm run serveを使用してプロジェクトを開始します。デフォルトのポートは8080です。
3. http：// localhost：8080 /に アクセスすると、ブラウザ でVueプロジェクトがローカルで実行されていることがわかります。
4.デモフォルダーでcmdを実行し、コマンドexpress --view = ejs serverを使用して、node.jsプロジェクトサーバーを作成します。
5.作成が完了したら、プロンプトに従い、コマンドcd serverを使用してサーバーフォルダーに入り、コマンドnpm installを使用して必要な依存関係をインストールし、npm startを使用してプロジェクトを開始します。デフォルトのポートは3000です。
6. http：// localhost：3000 /に アクセスすると、ローカルで実行されているNode.jsサーバープロジェクトが表示されます。
7.エディターでVueプロジェクトのデモを開き、サーバーフォルダーの下のルートフォルダーにあるindex.jsファイルを開いて、ルートを追加し、結果をjsonオブジェクトとして返します。
8.ターミナルでNode.jsプロジェクトサーバーを再起動し、ブラウザーでhttp：// localhost：3000 / personにアクセスし ます。リクエストが成功した後、戻り結果を確認できます
9.コマンドnpm install axiosを使用して、Vueプロジェクトの非同期リクエスト用のaxiosをインストールし、それをmain.jsのVueプロトタイプにインポートしてバインドします。
10. VueプロジェクトのApp.vueファイルにライフサイクルマウントフック関数を追加し、axiosを使用してgetリクエストを開始します。リクエストインターフェースはapi / personです。このとき、Vueプロジェクトを再起動すると、コンソールにリクエスト結果404（見つかりません）が表示されます
11.次のように、Vueプロジェクトのルートディレクトリに新しいvue.config.jsを作成します。
1 module.exports = { 2 devServer：{ 3 proxy：{ 4 '/ api' ：{ 5 target： 'http：// localhost：3000'、 // address where the node.js server is running 6 ws：true 、 7 changeOrigin ：true 、 8 pathRewrite：{ 9 '^ / api'： 'http：// localhost：3000' // path rewrite 10 } 11 }、 12 } 13 } 14 }
12. Vueプロジェクトを再起動し、コンソールを開くと、要求されたデータを確認できます。
