Multiples devServer proxies and multiples ports

Question

I need to query automated routes generated from from https://github.com/o1lab/xmysql on port 3000 from my vue.js dev env running on port 8080 .

vue.config.js :

module.exports = {
    devServer: {
        proxy: {
            "/api": {
                target: "http://localhost:80", // Works perfeclty
            },
            "/": {
                target: "http://localhost:80", // Works perfectly
            },
            "/generated": { // Not working
                target: {
                    port: 3000
                },
                secure: false,
                ws: false,
                changeOrigin: true

            }
        },
        hot: true,
        liveReload: true,
    }
};

xmysql params :

xmysql -h localhost -u root -p password -n 3000 -a /generated/ -d myDatabase

My vue.js axios "get" query :

 axios
    .get('/generated/meetings', {
        headers: {
            'Access-Control-Allow-Origin': 'all',
        }
    })
    .then(response => {
        console.log(response)
    })
    .catch(error => {
        console.log(error);
    });

The Error :

Cannot GET /generated/meetings

I can access localhost routes on my localhost:3000 into my firefox navigator and they work really well:

Looks like the proxy is not working, any idea ?

I have tried this other vue.config.js params with no luck :

 devServer: {
        proxy: {
            "/api": {
                target: "http://localhost:80",
                // ,pathRewrite: {'^/api' : ''}
            },
            "/": {
                target: "http://localhost:80",
            },
            "/generated": {
                target: "http://localhost:3000",
                pathRewrite: { '/generated': '' },
                secure: false,
                ws: false,
                changeOrigin: true

            }
        },
        hot: true,
        liveReload: true,
    }

The only thing working is this query :

 axios
    .get('localhost:3000/generated/meetings', {
        headers: {
            'Access-Control-Allow-Origin': 'all',
        }
    })
    .then(response => {
        console.log(response)
    })
    .catch(error => {
        console.log(error);
    });

But then, there is a CORS problem, and I can't get 'response', even if it gets displayed in the firefox console query, I can only get the error .

test1500 · Answer 1 · 2020-11-01T01:06:07.230

sorry, It seems that it was a /api/ conflict caused by a generic mongoDb back end starting by /api/ running in parrallel.

I ended up with this vue.config.js . Now my Mysql queries will go to /api routes, and my mongoDb queries will go to the generic-api routes, so I am able to handle 2 databases in one vue.js app:

module.exports = {
    devServer: {
        proxy: {
        "/api": {
            target: "http://localhost:3000", // This is set for xmysql routes generator https://github.com/o1lab/xmysql

        },
        "/": {
            target: "http://localhost:80", // Serving the vue.js app
        },
        "/generic-api": {
            target: "http://localhost:80", // When using generic-crud.js with mongoDb
        }
    },
        hot: true,
        liveReload: true,
    }
}

And this is my xmysql standard config , now :

xmysql -h localhost -u root -p password -n 3000  -d myDatabase

EDIT : NEW : Ho no, when I trigger NPM RUN BUILD, my /api routes are not working any more in my vue.js production app!

RESOLVED : Added a NODE EXPRESS proxy like this in my server.js node file :

// -------------------------------
// PROXY ALL API ROUTES QUERIES TO PORT 3000 TO USE WITH MYSQL ROUTES GENERATOR https://stackoverflow.com/questions/10435407/proxy-with-express-js
// -------------------------------
var proxy = require('express-proxy-server');
app.use('/api', proxy('http://localhost:3000/api'));

Now, even my vue.js production app queries are proxied to http://localhost:3000 , so it should work on heroku ...

Multiples devServer proxies and multiples ports

1 Answers1