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?

tony19 · Accepted Answer · 2021-06-20 18:20:45Z

1

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",

answered Jun 20, 2021 at 18:20

tony19

140k23 gold badges281 silver badges354 bronze badges

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

Collectives™ on Stack Overflow

devServer proxy in vue.config.js incorrectly mapping urls

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related