Webpack を使用してクロスドメインリクエストを処理する方法

今回は、webpack を使用してクロスドメイン リクエストを処理する方法と、webpack を使用してクロスドメイン リクエストを処理する際の注意点について説明します。以下は実際のケースです。

フロントエンドのデバッグ中、クロスドメインは常に厄介な問題です。前の記事では、クロスドメイン問題の解決策として、いくつかの考えられる方法について説明しました。

JSONP を使用する場合、まず、変更する必要があるものが多く、CORS を使用する場合は、アプリケーション/json タイプがありません。さらに重要なのは、これはフロントエンドのデバッグ中にのみ必要な要件であり、オンラインになった後ではないため、バックエンドへの侵入が多すぎるのは良くありません。

そこで、ある考えが突然私の頭に浮かびました - エージェントに参加すれば、この問題は解決するのではないか？でもよく考えたら書くのが結構面倒だったので保留にしました。

数日前まで、Stone は、webpack-dev-server がすでにそれを考えており、実装を支援してくれたと述べていました。

そこで、Vue プロジェクトでテストしたところ、ローカル サーバーをホット ロードできるだけでなく、ドメイン間でリモート API を直接呼び出すこともでき、以前に遭遇したすべての問題を完全に解決できることがわかりました。

次に、手順を簡単に紹介します (例として、Vue スキャフォールディングで構築された Webpack プロジェクトを取り上げます):

まず、build/webpack.dev.conf.js にこの設定項目が

proxy: config.dev.proxyTable,

あるかどうかを確認します。コメントアウトされています。コメントを開いてください。そうでない場合は、devServer オブジェクトに追加してください

次に、proxyTable 構成項目を config/index.js の dev オブジェクトに追加します:

proxyTable: {
   '/**': {
    target: 'http://api.xxx.com',
    changeOrigin: true,
    secure: false
   }
  },

前にあるキー /** は、次のことを意味します。すべてのリクエストをプロキシする場合、一部のリクエストをプロキシする場合は、/api などの文字列に変更できます。

背後のターゲットは、プロキシされる Web サイトです。changeOrigin は、HTTP リクエストの Origin フィールドを変更することを意味します。ブラウザは、これがローカル リクエストであると認識します。 end 相手はサイト内通話だと思います。

このように、このシンプルな構成により、クロスドメインの問題は完全に解決されます。

その後、

npm run dev

を直接実行すると、テストフロントエンドのajaxリクエストをバックエンドサーバーにプロキシしてテストすることができます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Js を使用して Promise ライブラリを実装する

React で画像をトリミングする方法

以上がWebpack を使用してクロスドメインリクエストを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。