web-dev-qa-db-ja.com

vue-cliを使用した別のバックエンドサーバーへのプロキシリクエスト

使っています vue-cliwebpack-simpleテンプレートを使用してプロジェクトを生成します。別のバックエンドサーバーにリクエストをプロキシしたいと思います。どうすればこれを簡単に達成できますか？

webpackvue.jswebpack-dev-server
22
Mahmud Adam

webpackテンプレートをvue-cliとともに使用する場合、このリファレンスドキュメントで必要な情報を見つけることができます。

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

または、今すぐテンプレートを変更する代わりに、関連する構成をwebpackテンプレートからローカルwebpack-simpleテンプレートにコピーできます。

編集：ローカル設定の詳細情報

これは、config/index.jsの下のmodule.exportsにあるものです。

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...

上記の構成では、vue-cliをポート4200で実行し、サーバーをポート8080で実行します。

編集：コメント＃4および＃5の後のCORSに関する情報を修正

注：

  • dev.proxyTableのchangeOriginオプション（webpack config内）を使用すると、サーバーAPI応答でCORSヘッダーを提供する必要がなくなります。
  • 何らかの理由でchangeOriginを省略することにした場合は、サーバーAPIの応答ヘッダーにAccess-Control-Allow-Origin: *（または同等のもの）が含まれていることを確認する必要があります。

参照：

  1. https://stackoverflow.com/a/36662307/654825
  2. https://github.com/chimurai/http-proxy-middleware
21
Mani

@ vue/cli 3.x：

  • プロジェクトのrootフォルダーにvue.config.jsファイルを作成します（まだない場合）。
  • その内容は次のとおりです。
// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      "/gists": {
        target: "https://api.github.com",
        secure: false
      }
    }
  }
};

これで、（開発サーバーがlocalhost:8080にある場合）http://localhost:8080/gistsへの呼び出しはすべてhttps://api.github.com/gistsにリダイレクトされます。


別の例：すべての呼び出しをプロキシする

通常、localhost:5000にデプロイされているローカルバックエンドサーバーがあり、/api/anythingへのすべての呼び出しをそのサーバーにリダイレクトするとします。つかいます：

// vue.config.js
module.exports = {
    devServer: {
        proxy: {
            "/api/*": {
                target: "http://localhost:5000",
                secure: false
            }
        }
    }
};
36
acdcjunior