クロスドメイン処理モードのVUE開発

クロスドメインの問題のVUEの開発を行ったときに私たちは、必然的に遭遇する、一般解は2、バックエンド構成のCORS、フレームワークのほとんどは、適切なコンフィギュレーションファイルに統合され、他方は、前段のリバースプロキシであるがあり、そして今日私が言いたいのは、生産のVUEリバースプロキシモードです。

 

　　CLI 2.xのを表示します。

　　　

プロキシ・テーブル：{
      jsonplaceholderへ/ APIで始まる//プロキシすべてのリクエスト
      '/ API'：{
        ターゲット：「のhttp：// localhostを：1337」、//ターゲットサーバは、ポート番号が支払うために注意します
        changeOrigin：真、//かクロスドメイン
        Pthriawrite：{
          「^ /アピ」：「」//は、APIを書き換え/ API /ログイン作る - >のhttp：// localhostを：1337 /ログインので、ここで私は、ブロガーの多くの午前同じことをしませCSDN、それは限りマッピングなど、個人的な好みかもしれライン上の対応するURLへ
        }
      }
    }、

　　

　　CLI 3.xのビュー：

プラグインをインストールします。

　　

糸がcnamts @インストールNPM @ cnamts / VUE-CLI-pluginのプロキシ＃を追加OR / VUE-CLI-pluginのプロキシ

　　

//vue.config.jsノートは、ルートディレクトリにあります
module.exportsは= {
    pluginOptions：{
        プロキシ：{
            有効：真、
            コンテキスト： '/ API'、
            オプション：{
                ターゲット：「http://192.168.43.106:8080」
                changeOrigin：真、
                WS：真、// WebSocketを
                Pthriawrite：{
                    '^ / API'： ''
                }
            }
        }
    }
}

　　

ここでは例です

このリンク：https://blog.csdn.net/my_csdn2018/article/details/82909989

 

 

リバースプロキシのプロセスを理解するクロスドメインを解決するために、

 

 

示されているように、ブラウザは、HTTPのURLを要求：// localhostを：？8081 / API /ポータル/発注/ queryOrderRow注文番号= 4015
// localhostを：8080 /ポータル、私は実際にHTTPリクエストされたURLに /オーダー/ queryOrderRow注文番号？ = 4015件の
HTTPでローカルプロジェクト：// localhostを：8081 /＃ / ブラウザでアクセスします。

このような相同httpリクエストとして、その後、リバースプロキシサーバーは、このように直接リクエストURLはクロスドメインリクエストを鍛造することにより、実際の問題を引き起こすバイパスし、実際のURLを要求するために、相同リバースプロキシサーバに要求を送信します。