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?

Answer 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.