Proxying webpack dev server in Vue

Question

I am trying to proxy all api/ requests to http://localhost:3000 using vue-axios and vuex. The output on the command line says that the proxy has been created but then it doesn't actually proxy to the right address and 404's.

I have the following setup inside of webpack:

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 of my actions 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 established:

[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 is incorrect about this?

I have consulted

Stackoverflow: Proxy requests to a separate backend server with vue-cli
Vue docs: https://vuejs-templates.github.io/webpack/proxy.html
Github issues: https://github.com/webpack/webpack-dev-server/issues/458

None of those solutions worked.

I have heard this might be a problem with hmr but that doesn't seem likely.

Any ideas?

I have tried the following combinations:

  '/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
  }
},

same problem here, still no solution

Plastic
– Plastic

2017-12-14 00:03:41 +00:00
Commented Dec 14, 2017 at 0:03 — Plastic
– Plastic, Commented Dec 14, 2017 at 0:03

Dan · Accepted Answer · 2019-05-16 21:55:25Z

6

I just had this same problem and tried everything. It turns out the proxy appends the matched path segment /api onto the end of the target and looks there for the proxied file. So this rule:

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

is actually seeking for the file here:

http://localhost:3000/api

Non-intuitive. If you want this to function more intuitively and target the actual target, you need to remove the matched portion from the path like this:

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

The correct rule becomes:

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

For unknown reason, pathRewrite is not explicitly listed in the docs sidebar here, though it is tucked away in 1 location in the config guide.

edited May 16, 2019 at 21:55

answered May 16, 2019 at 9:57

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mahmud Adam · Accepted Answer · 2018-03-05 05:41:37Z

0

Try making a request to the following Vue.axios.post("api/users", user) instead.

answered Mar 5, 2018 at 5:41

Mahmud Adam

3,5898 gold badges38 silver badges54 bronze badges

Collectives™ on Stack Overflow

Proxying webpack dev server in Vue

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related