Can't configure devServer proxy many entries

[Toilal]

Version

3.0.0-beta.6

Reproduction link

vue-cli/packages/@vue/cli-service/lib/util/prepareProxy.js

Line 111 in 114e085

return Object.keys(proxy).map(context => {

Steps to reproduce

Set up two proxies in devServer configuration

{
    '/api': {
      target: 'http://localhost:9488',
      pathRewrite: {'^/api/': '/api/'},
      xfwd: true
    },
    '/auth': {
      target: 'http://localhost:9485',
      pathRewrite: {'^/auth/': '/auth/'},
      xfwd: true
    }
  }

What is expected?

Both proxies should work.

What is actually happening?

It seems to configure the last entry only. In fact, it doesn't seem that devServer supports an array of proxy definition , an associative object should be given.

---

[LinusBorg]

Linking our source is not a reproduction.

It seems to configure the last entry only.

Meaning, what is happening? What's the exact undesirable behaviour we should see when reproducting this (assuming you provide a reproduction)?

[Toilal]

It's not easy to provide a reproduction, as you need an app with 2 reverse proxies defined. In my app, I have 1 reverse proxy configured for OpenID server (/auth), and another one for API (/api).

Problem is that an indexed array is given to webpack devServer proxy option instead of an associative array.

[{
    target: 'http://localhost:9488',
    pathRewrite: {'^/api/': '/api/'},
    xfwd: true
}, {
    target: 'http://localhost:9485',
    pathRewrite: {'^/auth/': '/auth/'},
    xfwd: true
}]

but it should be:

{
  '/api': {
    target: 'http://localhost:9488',
    pathRewrite: {'^/api/': '/api/'},
    xfwd: true
  },
  '/auth': {
    target: 'http://localhost:9485',
    pathRewrite: {'^/auth/': '/auth/'},
    xfwd: true
  }
}

[Toilal]

My exact undesirable behaviour is the following:

both /api/* and /auth/* requests are proxied to the same proxy configuration /api.

[LinusBorg]

I see, now I got it. We'll look into it!

[liyuanqiu]

I have the same problem. Even more, all my requests are proxied to the first defined proxy, including those paths are not matched.
@LinusBorg Have you solved this bug?

[yyx990803]

Can't reproduce - the multi proxy configs is working correctly in my local testing. This may have to do with your pathRewrite configuration (which doesn't seem to be doing anything).

If you read the source code of webpack-dev-server, you'll notice it actually converts the object-based proxy options into an Array first. The internal format passed by vue-cli is correct.

[zzlw]

proxy 无效

proxy: { // 参考 http-proxy-middleware: https://github.com/chimurai/http-proxy-middleware#proxycontext-config
      '/topics': {
        target: ' https://cnodejs.org/api/v1', // 目标站点
        ws: true, // 代理 websockets
        changeOrigin: true, // 是否需要虚拟主机站点
        pathRewrite: {
          '^/topics': '/topics'
        }
      }
    }

[zimplexing]

want to proxy exclude some match path， how to configure in vue-cli 3.0
for example
in devServer.proxy

    proxy: {
      context: ['/example/**', '!/mock/**'],
      target: 'http://localhost:8888',
      changeOrigin: true
    }

proxy path include /example/ but exclude /mock/xxxxx/template/

[tangdw]

@zimplexing 这里的 proxy 好像并不支持 webpack-dev-server 的 devServer.proxy写法
https://webpack.docschina.org/configuration/dev-server/#devserver-proxy

[FFGF]

you can write as follow
devServer: {
proxy: {
'/getAbc|/getSde|/getCde': {
target: 'http://127.0.0.1:3000/avc/',
},
'/initQwer': {
target: 'http://127.0.0.1:3000/def',
},
'/getCvf': {
target: 'http://127.0.0.1:3000/efd/'
}
}
}

[ghwyf]

If you are making a GET request, this might caued by browser cache, you should check the "Disable cache" box in 'Network 'tab.