http-proxy

http-proxy は、webpack-dev-server によって統合され、プロキシとして使用される、nodejs http プロキシライブラリです。その理由は、フロントエンドとバックエンドの分離が普及している現在、ホスト名を構成せずにバックエンド API インターフェイスをローカルで調整する必要がある場合、必然的にクロスドメインリクエストになるためです。ブラウザのクロスドメインセキュリティ制限により呼び出しがブロックされるため、ローカル開発環境にはローカルプロキシが必須となっています。

'/saasapi/*': {
    target: 'http://ebk.17u.cn',
},

ログイン後にコピー

どういうことかというと、saasapiで始まるajaxリクエストをhttp://ebk.17u.cnにリダイレクトするということですhttp://ebk.17u.cn

本地开发没有问题，线上如果也是用nodejs的服务器，如果恰巧也配置了代理，部署到线上出现了意想不到的问题~

后端nginx配置了反向代理

一个网站主域名是17u.cn，后端如果部署了多个api服务，那这样子他的api服务可能是这样子

主域名	二级域名1	二级域名2	二级域名3
17u.cn	ebk.17u.cn	ebk2.17u.cn	ebk3.17u.cn

前端同样部署了3个nodejs服务，也同样配置了3个代理。部署到线上却发现，请求总是指向第一个二级域名，其他的二级域名访问不到。

百思不得姐！

后来仔细查看http的信息，发现几个服务的ajax请求发到服务器上之后，hostname都是浏览器的域名，而nginx的反向代理配置都是根据hostname来做转发的。因为我们的hostname对于nginx来说都是陌生的，所以就默认转发到默认的第一个服务上去了。

查了http-proxy配置，哈哈，果然有这种修改的配置，只要稍微改一下就好了。

'/saasapi/*': {
    target: 'http://ebk.17u.cn',
    changeOrigin: true
},

ログイン後にコピー

changeOrigin: true意思就是把hostname改为和target一致就可以了。这样后端nginx就可以正常转发了。

后端配置了cookie Path

后端api，不仅仅配置了二级域名，还配置了二级目录，前端部署的服务也一样需要二级目录。

api地址就变成这个样子：

ebk.17u.cn/saasapi

ログイン後にコピー

前端地址：

trans.17u.cn/saas

ログイン後にコピー

代理配置做对应调整

'/saas/saasapi/*': {
    target: 'http://ebk.17u.cn',
    changeOrigin: true,
    rewrite: path => path.replace(/^\/saas\/saasapi\/cxy/, '/saasapi')
},

ログイン後にコピー

这样子看起来很正常吧，但是问题出在哪呢？后端把登录之后设置的cookie也设置了path：Path='/saasapi'。

这样子问题就来了，trans.17u.cn/saas当前域名下读取不到/saasapi

オンラインでnodejsサーバーも使用している場合は、ローカル開発でも問題ありません。プロキシも設定されており、オンラインで展開すると予期せぬ問題が発生しました~

バックエンド nginx はリバースプロキシで設定されています

複数の API の場合、Web サイトのメインドメイン名は 17u.cn です。バックエンドサービスにデプロイされている場合、API サービスは次のようになります

プライマリドメイン名	セカンドレベルドメイン名 1	第 2 レベルドメイン名 2	第 2 レベルドメイン名 3
17u.cn	ebk.17u .cn	ebk2.17u.cn	ebk3.17u.cn

フロントエンドも3つのnodejsをデプロイしますサービスも3つのプロキシで構成されます。オンラインで展開した後、リクエストは常に最初の第 2 レベルドメイン名を指しており、他の第 2 レベルドメイン名にはアクセスできないことがわかりました。

同情せずにはいられません！

その後、http 情報を注意深く確認したところ、いくつかのサービスの ajax リクエストがサーバーに送信された後、ホスト名はブラウザーのドメイン名であり、nginx のリバースプロキシ設定はホスト名に基づいて転送されていることがわかりました。私たちのホスト名は nginx にとって馴染みのないものであるため、デフォルトではデフォルトの最初のサービスに転送されます。

http-proxy 設定を確認しました。はは、確かに、そのような変更された設定があります。少し変更するだけです。

cookiePathRewrite: { '/saasapi': '/saas/saasapi' }

ログイン後にコピー

changeOrigin: true は、ターゲットと一致するようにホスト名を変更するだけを意味します。このようにして、バックエンド nginx は正常に転送できるようになります。

バックエンドは Cookie パス

で構成されますバックエンド API は、第 2 レベルのドメイン名を構成するだけでなく、フロントエンドにデプロイされるサービスには第 2 レベルのディレクトリも構成します。 -レベルのディレクトリ。

API アドレスは次のようになります:

cookieDomainRewrite

ログイン後にコピー

フロントエンドアドレス:

rrreeeそれに応じてプロキシ構成を調整しますrrreee

これは普通のことのように思えるかもしれませんが、どこに問題があるのでしょうか?バックエンドは、ログイン後に Cookie セットのパスも設定します: Path='/saasapi'。

問題が発生します。trans.17u.cn/saas が現在のドメイン名の /saasapi にある Cookie を読み取ることができず、フロントエンドログインが毎回失敗します。 . ですが、API を正常に調整することはできません。呼び出されるたびに、ログインしていないとメッセージが表示されます。

ご質問がある場合は、まずドキュメントをご確認ください。 🎜🎜私はまだ解決策を見つけました🎜rrreee🎜 Cookie のパスを書き換えるだけです。同様に、バックエンドインターフェイスが Cookie のドメインを指定している場合、まだ解決策はあります🎜rrreee🎜 他にもいくつかの書き換えがあり、より使いやすくなるはずです。 🎜🎜追記: 問題を解決する過程で、変更が常に失敗することがわかり、ライブラリのバグではないかと疑ったことがありました。後で、Chrome の Cookie をクリアする必要があることがわかりました。 🎜🎜「アプリケーション」→「Cookie」をクリックします: 以下の Cookie は削除できません。すべての Cookie をクリアすることはできません。「アプリケーション」→「ストレージのクリア」および「サイトデータのクリア」に移動する必要があります。最終的な成功🎜🎜関連する推奨事項: 🎜🎜🎜Js のフロントエンドモジュール化の詳細な分析と相違点の比較🎜🎜🎜🎜 jQuery でよく使用されるメソッド (コード付き) 🎜🎜🎜🎜 jQuery オブジェクトとネイティブDOM オブジェクト間の違いと変換🎜🎜

以上がNodejs の http プロキシライブラリ http-proxy における一般的な問題の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。