Missing URL parts with devServer proxy

Question

I've got the following vue.config.js in my Vue project:

module.exports = {
    devServer: {
        proxy: {
            '^/api/': {
                target: 'https://example.com/api/',
                changeOrigin: true,
                logLevel: 'debug'
            },
        }
    }
}

So all requests to /api/* should be redirected to https://example.com/api/*. Unfortunately, the proxy seems to remove parts of the URL coming after api/:

[HPM] POST /api/api-token-auth/ -> https://example.com/api/

What happened to the api-token-auth/ part?

Dan · Accepted Answer · 2020-12-29 18:06:07Z

1

To proxy all requests to /api according to the syntax in the docs, create the rule as follows:

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://example.com',
                changeOrigin: true,
                logLevel: 'debug'
            },
        }
    }
}

You shouldn't put the /api path again in target because everything after and including /api from your original route will be appended onto the target.

answered Dec 29, 2020 at 18:06

Dan

63.5k18 gold badges113 silver badges122 bronze badges

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

1 Comment

The_Fallen Over a year ago

Thanks, works like a charm. Sometimes one doesn't spot the obvious...

Collectives™ on Stack Overflow

Missing URL parts with devServer proxy

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related