Node.js 多个devServer代理和多个端口

我需要从运行在端口8080上的vue.js dev env查询从端口3000生成的自动路由

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 -h localhost -u root -p password -n 3000 -a /generated/ -d myDatabase

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

Cannot GET /generated/meetings

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

xmysql参数：

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 -h localhost -u root -p password -n 3000 -a /generated/ -d myDatabase

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

Cannot GET /generated/meetings

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

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

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 -h localhost -u root -p password -n 3000 -a /generated/ -d myDatabase

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

Cannot GET /generated/meetings

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

错误：

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 -h localhost -u root -p password -n 3000 -a /generated/ -d myDatabase

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

Cannot GET /generated/meetings

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

我可以在firefox navigator中访问localhost:3000上的localhost路由，它们工作得非常好：

看来代理不起作用了，知道吗

我尝试过其他vue.config.js参数，但没有成功：

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

唯一有效的就是这个查询：

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 -h localhost -u root -p password -n 3000 -a /generated/ -d myDatabase

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

Cannot GET /generated/meetings

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

---

但是，还有一个CORS问题，我无法得到“响应”，即使它显示在firefox控制台查询中，我也只能得到错误。

对不起，这似乎是由在Parralel中以/api/运行的通用mongoDb后端引起的/api/冲突

我最终得到了这个vue.config.js。现在我的Mysql查询将转到/api路由，我的mongoDb查询将转到通用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有效