Vue proxyTable開発環境におけるフロントエンドとバックエンドのリアルデータドッキングの問題とドメイン間の解決

私たちのフロントエンドがVueでプロジェクトを開発するとき、フロントエンドとバックグラウンドの連調の真実なデータのドッキングに関連して多くの問題が発生します.例えば、ドメインをまたいで....ローカルlocalhostアドレスをオンラインアクセスインタフェースのデータアドレスドメイン名に変更する必要があります.
開発環境APIエージェント設定
現在のエンドが既存のバックエンドの実際のデータと統合されている場合、devサーバを使用するときにバックエンドAPIにアクセスする必要があります.これを実現するために、devサーバとAPIバックエンドを並列(またはリモート)に実行し、devサーバにすべてのAPI要求を実際のバックエンドにエージェントさせることができます.
エージェントルールを構成するにはconfig/index.jsでdev.proxyTableオプションを編集します.devサーバはhttpエージェントミドルウェアを使用してエージェントを行っているので、ドキュメントを参照して詳細な使用方法を参照してください.しかし、これは簡単な例です.

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://test.data.com',
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

           /api/posts/1    http://test.data.com

では、ドメイン間の問題をどのように解決するのでしょうか.実は上の'list'のパラメータにはchangeOriginのパラメータがあり、ブール値を受信します.trueに設定すると、ローカルはサービス側があなたの要求を受信し、代わりにこの要求を送信します.そうすれば、ドメイン間の問題はありません.もちろん、これは開発環境にのみ適用されます.追加されたコードは次のとおりです.

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://test.data.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

Webサイトの照合
静的Webサイトに加えて、globモードを使用して、/API/**などのWebサイトをマッチングすることもできます.詳細については、コンテキストマッチングを参照してください.また、要求がプロキシされるべきかどうかを判断するカスタム関数として使用できるフィルタオプションも用意できます.

proxyTable: {
  '*': {
    target: 'http://test.data.com',
    filter: function (pathname, req) {
      return pathname.match('^/api') && req.method === 'GET'
    }
  }
}

具体的にはhttps://vuejs-templates.github.io/webpack/proxy.html