Vue.js app getting 404 error when requesting data from the backend using proxy

all,

I am writing a front-end of my app, using Vue. I need to request some information from the back-end, launched on the same server.

I added proxy like this:

module.exports = {
  devServer: {
    port: 2611,
    proxy: {
      '/api/markets/light': {
        target: 'http://localhost:2610/markets/light',
        ws: true,
        logLevel: 'debug',
        pathRewrite: {
          '^/api/markets/light': '/markets/light',
        },
      },
    },
  },
}

(I've tried different combinations of the parameters, like excluding pathRewrite, '^/api/...' instead of '/api/...', etc.)

This is how data is requested from the code:

  created() {
    axios.get(this.$store.getters.marketsLightLink)
      .then(response => this.markets = response.data)
      .catch(error => console.log(error));
  }

marketsLightLink simply concatenates strings:

const store = new Vuex.Store({
  state: {
    marketDataHost: '/api',
    markets: {
      markets: '/markets',
      marketLight: '/markets/light',
    },
  },
  getters: {
    marketsLightLink(state) {
      return state.marketDataHost + state.markets.marketLight;
    },
  },
});

So when i open the page, where i should see the results of the request, i just see 404 error in the browser's console and no data downloaded. At the same time I see, that the link is proxied correctly:

[HPM] Rewriting path from "/api/markets/light" to "/markets/light"
[HPM] GET /api/markets/light ~> http://localhost:2610/markets/light

And when i press the resulting link, the requested information is shown in the browser.

Can anyone help me, what am I doing wrong please?