vue-cliを使用して別のバックエンドサーバーへのプロキシ要求

私はvue-cliwebpack-simpleテンプレートを使用してプロジェクトを生成しており、別のバックエンドサーバーに要求をプロキシしたいとします。どのようにこれを簡単に達成することができますか？vue-cliを使用して別のバックエンドサーバーへのプロキシ要求

出典

2016-10-29 Mahmud Adam

私は本当にVUE-cli'の定型 'をよく見てとると、この発電機のための[使用しませんでしたyeoman]（https://github.com/fountainjs/generator-fountain-vue）をクリックしてください。 webpack/gulp/browser-syncに関する知識がほとんどなくても（バックエンドと統合しようとするといくつかの問題がありましたが）、私は始めました。私はそれが見える価値があると思うし、 'vue - cli'とそれを選択する価値があると思う。 –

あなたはvue-cliでwebpackテンプレートを使用する場合は、あなたがこの参照文書に必要な情報を見つけることができます。

http://vuejs-templates.github.io/webpack/proxy.html

またはその代わりに今、あなたのテンプレートを変更し、あなたがから、関連する設定をコピーすることができますテンプレートwebpackをローカルwebpack-simpleテンプレートに追加します。

EDIT：私の地元のセットアップから詳細

これはmodule.exportsの下で、私は私のconfig/index.jsに持っているものである：上記の設定は、ポート4200上で私のvue-cliを実行し、私は私を実行

dev: { 
    env: require('./dev.env'), 
    port: 4200, 
    assetsSubDirectory: 'static', 
    assetsPublicPath: '/', 
    proxyTable: { 
     '/api': { 
      target: 'http://localhost:8080', 
      changeOrigin: true 
     }, 
     '/images': { 
      target: 'http://localhost:8080', 
      changeOrigin: true 
     }, 
     // and so on...

サーバ上のポート8080。

EDIT：コメント＃4と＃5の後のCORSについての情報を修正しました

注：

（WebPACKのコンフィグ中）dev.proxyTableでchangeOriginオプションは、サーバーのAPIレスポンスにCORSヘッダーを提供する必要がないことを保証します。
何らかの理由でchangeOriginを省略する場合は、サーバーAPIに応答ヘッダーにAccess-Control-Allow-Origin: *（または同等のもの）が含まれていることを確認する必要があります。

参考文献：

出典

2016-10-29 02:33:31 Mani

webpack-simpleテンプレートを使用するのは難しいですか？ –

'webpack-simple'はVue.jsを使い始めることを意図していると思います'webpack'テンプレートはより多くの設定を提供し、さらに詳しい情報のために[詳細なヘルプページ]（http://vuejs-templates.github.io/webpack/）を持っています。 – Mani

あなたが正しく言うように、後で単純なテンプレートを使い、たくさんのコードを書くことは、あなた自身のすべての追加設定作業を自分で行う必要があるので、もっと難しくなります。 – Mani

vue-cliを使用して別のバックエンドサーバーへのプロキシ要求

答えて

関連する問題