devServer proxy doesn't work

1001v

Hello. I’m trying to use devServer.proxy option like this:

devServer: {
      https: false,
      port: 8081,
      open: false,
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true
        }
      }
    },

localhost:8080 is my backend location and localhost:8081 is my frontend location. I expect all requests starting with /api go to localhost:8080. However, proxy doesn’t work like nothing is enabled and all requests go to frontend dev server ignoring the setting.
I’ve also tried to set the devServer.public option to “localhost:8081”, but it didn’t help.
How could i fix it? Thank you.

qyloxe

@1001v this is a simple working configuration, try this one:

    devServer: {
      host: options.devhost,
      https: true,
      port: options.devport, // 8084?
      open: false, // opens browser window automatically
      vueDevtools: ctx.vueDevtools,
      proxy: {
        '/api': {
          target: options.appurl, // 'http://localhost:8085', // pathRewrite: {'^/api': ''}
          secure: false
        }
      }
    },

I have in archives also something like this, maybe also will be useful:

      proxy: [{
        context: ['/appmanager', '/img', '/media'],
        target: 'http://localhost:8085',
        secure: false,
        changeOrigin: true,
        /*
        cookieDomainRewrite: {
          'localhost': 'localhost:8085',
          '*': 'localhost:8085'
        },
        */
        cookiePathRewrite: {
          '/appmanager': '/',
          '*': '/'
        },
        headers: {
          // 'Quasar-Proxy2': 'YYY'
        },
        pathRewrite: {
          // '^/api': ''
        }
      }],

dobbel

@qyloxe Is this webpack functionality? Could you explain what it does? ( the last code sample)

qyloxe

@dobbel said in devServer proxy doesn't work:

@qyloxe Is this webpack functionality? Could you explain what it does? ( the last code sample)

yes, webpack. Docs here:
https://webpack.js.org/configuration/dev-server/

I needed something like that to test cookie/header authentication, proxyfying session cookies between xhr requests from different domain to backend servers etc. With such magic you can mimic almost exactly what is on the front at reverse proxy level (nginx/openresty/etc). I wouldn’t say it’s the best possible configuration for developer, there are more options now possible, but it is adequate and working which means - good enough.