多个开发服务器代理和多个端口答案

【问题标题】：Multiples devServer proxies and multiples ports多个开发服务器代理和多个端口
【发布时间】：2021-02-14 00:49:51
【问题描述】：

我需要从运行在端口 8080 上的 vue.js 开发环境中查询从端口 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 "get" 查询：

 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' : ''}
            },
            "/": {
                target: "http://localhost:80",
            },
            "/generated": {
                target: "http://localhost:3000",
                pathRewrite: { '/generated': '' },
                secure: false,
                ws: false,
                changeOrigin: true

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

唯一有效的是这个查询：

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

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

【问题讨论】：

标签： node.js vue.js proxy routes webpack-dev-server

【解决方案1】：

sorry，看来是/api/并行运行的通用mongoDb后端引起的/api/冲突。

我最终得到了这个 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 上运行......

【讨论】：