今回は、proxyTable プロキシのクロスドメイン使用について詳しく説明します。proxyTable プロキシをドメイン間で使用する場合の 注意事項 は何ですか?実際のケースを見てみましょう。 プロキシクロスドメインとは何ですか?セキュリティを考慮して、いくつかの特別な例を除いて、異なるドメイン間でデータを取得することは許可されていません。 、 や <audio> などのタグはクロスドメインにすることができますが、通常は、js の axios を使用してリモートで取得する場合、同じオリジン ポリシーがトリガーされます。サーバー コードが設定されています <p style="text-align: left;">頭<a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank"> er は訪問を許可することに同意していますが、これは明らかに非常に不合理です。 。最近はフロントエンドとバックエンドを分けるのが主流ではないでしょうか? バックエンドのコードが逃げてフロントエンドだけが残るのはどうすればよいのでしょうか?クロスドメインを使用するのは非常に面倒で難しいため、これを行うことは不可能である可能性があります。それなら、プロキシクロスドメインを使用できます</a></p> <p style="text-align: left;"><span style="color: #ff0000">プロキシクロスドメインの原則<strong></strong></span></p>いわゆるプロキシは、次のとおりです。フロントエンドを置き換え、バックエンドを使用して http リクエストを作成します。vue のスキャフォールディングと同様に、プロジェクトを実行するには、npm run dev または npm run start を入力する必要があります。このコマンドは、実際に構成されたノード サーバーを開きます。 vue スキャフォールディングのエージェントは、フロント デスクの代わりにノードを使用して http リクエストを開始します。リクエストはブラウザによって開始されないため、非常に簡単ではないでしょうか。 <p style="text-align: left;"></p>vue スキャフォールディングを使用してクロスドメインをプロキシする方法、config フォルダーでindex.js ファイルを見つけます。ファイル内に dev があり、その中にある proxyTable{} を見つけて変更します<p style="text-align: left;"></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>proxyTable: { '/api': { target: 'https://www.xxx.com/',//你要跨的域 changeOrigin: true, pathRewrite: { '^/api': '/api', }, headers:{ //这边可以堆headers进行设置 } }, },</pre><div class="contentsignin">ログイン後にコピー</div></div> ここで、target は指定したアドレスですクロスドメインを希望します。/api は、横断するドメインの下の次のレベルのパスです。上記と同様に、https://www.xxx.com/api の下にあるものを取得します。次に、ajax パッケージ axios を導入します。 ajax を実行します<p style="text-align: left;"></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>import axios from 'axios' axios.get('/getMessage').then(()=>{})</pre><div class="contentsignin">ログイン後にコピー</div></div> この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 <p></p>推奨読書: <p></p> <p>エレガントモードでのCSSモジュールの使用<a href="http://www.php.cn/js-tutorial-394786.html" target="_blank"></a></p> <p style="text-align: left;">vueでコンポーネントを記述する方法<a href="http://www.php.cn/js-tutorial-394785.html" target="_blank"></a><br></p> <p style="text-align: left;">webpackのホットリフレッシュとホットロードの使用方法の詳細な説明<a href="http://www.php.cn/js-tutorial-394784.html" target="_blank"></a><br></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
