Proxy error: Could not proxy request xxx from localhost:8080 to http://localhost:3000(ECONNREFUSED)

問題

在 mock 資料的時候，配置 ​

​vue.config.js​

​ 裡的 devServer 的 proxy 時報錯，錯誤如下

我的配置如下：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                bypass: function (req, res,) {
                    if (req.headers.accept.indexOf('html') !== -1) {
                        console.log('Skipping proxy for browser request.');
                        return '/index.html';
                    } else {
                        // 将請求url轉為檔案名
                        const name = req.path.split("/api/")[1].split("/").join("_");
                        const mock = require(`./mock/${name}`);
                        const result = mock(req.method);
                        // 需要清除緩存
                        delete require.cache[require.resolve(`./mock/${name}`)];
                        return res.send(result);
                    }
                },
            },
        },
    },
}      

解決方案一

我們可以将 target 端口 3000 改成跟起的服務一樣 ​

​http://localhost:8080​

​，都是 8080 端口即可。

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                bypass: function (req, res,) {
                    if (req.headers.accept.indexOf('html') !== -1) {
                        console.log('Skipping proxy for browser request.');
                        return '/index.html';
                    } else {
                        // 将請求url轉為檔案名
                        const name = req.path.split("/api/")[1].split("/").join("_");
                        const mock = require(`./mock/${name}`);
                        const result = mock(req.method);
                        // 需要清除緩存
                        delete require.cache[require.resolve(`./mock/${name}`)];
                        return res.send(result);
                    }
                },
            },
        },
    },
}      

​

​ECONNREFUSED​

​​ 的意思就是：ECONNREFUSED（連接配接被拒絕）：無法建立連接配接，因為目标機器主動拒絕了它。這通常是由于嘗試連接配接到在外部主機上不活動的服務造成的。上面報錯就是因為代理對象沒有開啟服務，不能通路到​

​http://localhost:3000​

​ 對象伺服器。

​​ECONNREFUSED的說明​​

解決方案二

就是修改代理規則 ​

​/api​

​​ 為 ​

​@(/api)​

​，至于原因我也不清楚，有知道的大佬還望告知一下，在此先感謝。

module.exports = {
    devServer: {
        proxy: {
            '@(/api)': {
                target: 'http://localhost:3000',
                bypass: function (req, res,) {
                    if (req.headers.accept.indexOf('html') !== -1) {
                        console.log('Skipping proxy for browser request.');
                        return '/index.html';
                    } else {
                        // 将請求url轉為檔案名
                        const name = req.path.split("/api/")[1].split("/").join("_");
                        const mock = require(`./mock/${name}`);
                        const result = mock(req.method);
                        // 需要清除緩存
                        delete require.cache[require.resolve(`./mock/${name}`)];
                        return res.send(result);
                    }
                },
            },
        },
    },
}