多个devServer代理和多个端口

问题描述

我需要从运行在端口8080上的vue.js dev env查询从端口3000上的https://github.com/o1lab/xmysql生成的自动路由。

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参数：

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

我的vue.js axios“获取”查询：

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

错误：

Cannot GET /generated/meetings

我可以将localhost：3000上的localhost路由访问到我的firefox导航器中，并且它们工作得很好：

好像代理不起作用，知道吗？

我没有运气尝试过其他vue.config.js参数：

 devServer: {
        proxy: {
            "/api": {
                target: "http://localhost:80",//,pathRewrite: {'^/api' : ''}
            },},"/generated": {
                target: "http://localhost:3000",pathRewrite: { '/generated': '' },}

唯一有效的方法是此查询：

 axios
    .get('localhost:3000/generated/meetings',}
    })
    .then(response => {
        console.log(response)
    })
    .catch(error => {
        console.log(error);
    });

但是，这是一个CORS问题，即使在firefox控制台查询中显示了“响应”，我也无法得到“响应”。

解决方法

抱歉，这似乎是/ api /冲突，这是由以/ api /开头的通用mongoDb后端在parrallel中运行。

我最终看到了这个 vue.config.js 。现在，我的Mysql查询将转到/ api路由，而mongoDb查询将转到generic-api路由，因此我能够在一个vue.js应用程序中处理2个数据库：

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

这是我的xmysql标准配置，现在：

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

编辑：新功能： 否，当我触发NPM RUN BUILD时，我的/ api路由在我的vue.js生产应用程序中不再起作用！

已解决：在我的server.js节点文件中添加了一个NODE EXPRESS代理：

// -------------------------------
// 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'));

现在，甚至我的vue.js生产应用程序查询都被代理到http：// localhost：3000，因此它应该可以在heroku上运行...