Multiples devServer proxies and multiples ports - node.js

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 .

Answer 1

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