devServer proxy in vue.config.js incorrectly mapping urls

Question

I'm working on a vue/cli 3 project. My vue.config.js is

module.exports = {
  publicPath: process.env.NODE_ENV == 'production' ? '/admin/' : '/',
  devServer: {
    proxy: {
      '/serveradmin': {
        target: 'http://localhost:8080/serveradmin',
      },
      "/assets/*": {
        target: "http://localhost:8080/assets",
        logLevel: 'debug',
        changeOrigin: true,
        secure: false,
      },
    },
  },
};

Using curl -v -X "HEAD" http://localhost:8081/assets/css/main.css, I get a 404. The console shows:

  App running at:
  - Local:   http://localhost:8081/ 
  - Network: http://192.168.1.155:8081/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

[HPM] HEAD /assets/css/main.css -> http://localhost:8080/assets

I've tried fiddling with pathRewrite, and it doesn't change the results. Changing the proxy key to "/assets" doesn't make any difference. What am I doing wrong?

score 1 · Answer 1 · answered Jun 20 '21 at 18:20

The target property should be the base URL to which the original path is appended. With your current config, the request would be for http://localhost:8080/assets/assets/css/main.css (notice the two assets).

Remove the /assets suffix from your target URL:

// target: "http://localhost:8080/assets",
target: "http://localhost:8080",

devServer proxy in vue.config.js incorrectly mapping urls

1 Answers1