Webpack dev proxy in Vue

Question

I am trying to proxy all api/requests to http://localhost:3000using vue-axios vuexand vuex. The output on the command line indicates that the proxy was created, but then it is not really a proxy to the correct address and 404.

I have the following settings inside the web package:

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

And inside my action file, I have:

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
        })
  })
}

The console output suggests that the proxy has been installed:

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

But when I actually call the function, it returns http://localhost:8080/users 404 (Not Found)

What's wrong with that?

I consulted

• Stackoverflow: proxy requests to a separate internal server using vue-cli

• Vue docs: https://vuejs-templates.imtqy.com/webpack/proxy.html

• Github issues: 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
  }
},

Answer 1

. , - /api . , :

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

:

http://localhost:3000/api

Non-. , , :

pathRewrite: {'^/api' : ''}

:

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

, pathRewrite , 1 .

Answer 2

Vue.axios.post("api/users", user).