javascript - Vue で webpack dev サーバーをプロキシする

Question

api/すべてのリクエストをandをhttp://localhost:3000使用してプロキシしようとしています。コマンド ラインの出力には、プロキシが作成されたことが示されますが、実際には正しいアドレスと 404 にプロキシされません。vue-axiosvuex

webpack内に次の設定があります：

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    'api/': {
      target: 'https://localhost:3000/api',
      changeOrigin: true,
      pathRewrite: {
        '^/api':""
      }
    }
  }
}

そして私のアクションファイルの中に私は持っています:

import Vue from 'vue'

export const register = ({ commit }, user) => {
  return new Promise((resolve, reject) => {
    Vue.axios.post('users', user)
        .then(res => {
          console.log(res)
          debugger
        })
        .catch(err => {
          console.error(err)
          debugger
        })
  })
}

コンソール出力は、プロキシが確立されたことを示しています。

[HPM] Proxy created: /api  ->  https://localhost:3000/api
[HPM] Proxy rewrite rule created: "^/api" ~> ""

しかし、実際に関数を呼び出すと、戻りますhttp://localhost:8080/users 404 (Not Found)

これについて何が間違っていますか?

相談しました

• Stackoverflow: vue-cli を使用して別のバックエンド サーバーにリクエストをプロキシする

• Vue ドキュメント: https://vuejs-templates.github.io/webpack/proxy.html

• Github の問題: https://github.com/webpack/webpack-dev-server/issues/458

これらの解決策はどれも機能しませんでした。

これは hmr の問題かもしれないと聞いたことがありますが、そうではないようです。

何か案は？

次の組み合わせを試しました。

  '/api': {
    target: 'https://localhost:3000',
    secure: false,
    changeOrigin: true
  },

  'api/': {
    target: 'https://localhost:3000',
    secure: false,
    changeOrigin: true
  },

  'api/*': {
    target: 'https://localhost:3000',
    secure: false,
    changeOrigin: true
  },

  '*/api/**': {
    target: 'https://localhost:3000',
    secure: false,
    changeOrigin: true
  },

  '*': {
    target: 'https://localhost:3000',
    secure: false,
    changeOrigin: true
  },

  '/api/*': {
    target: 'http://localhost:3000',
    changeOrigin: true
  }

proxy: {
  "/api": {
    "target": {
      "host": "localhost",
      "protocol": 'http:',
      "port": 3000
    },
    ignorePath: true,
    changeOrigin: true,
    secure: false
  }
},