Proxy error: Could not proxy request xxx from localhost:8080 to http://localhost:3000(ECONNREFUSED)-Toy模板网

这篇具有很好参考价值的文章主要介绍了Proxy error: Could not proxy request xxx from localhost:8080 to http://localhost:3000(ECONNREFUSED)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题

在 mock 数据的时候，配置 vue.config.js 里的 devServer 的 proxy 时报错，错误如下

from localhost:8080 to http://localhost/qunar/api (econnrefused),Vue 技术栈,vue.js

我的配置如下：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                bypass: function (req, res, proxyOptions) {
                    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, proxyOptions) {
                    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);
                    }
                },
            },
        },
    },
}

from localhost:8080 to http://localhost/qunar/api (econnrefused),Vue 技术栈,vue.js
ECONNREFUSED 的意思就是：ECONNREFUSED（连接被拒绝）：无法建立连接，因为目标机器主动拒绝了它。这通常是由于尝试连接到在外部主机上不活动的服务造成的。上面报错就是因为代理对象没有开启服务，不能访问到http://localhost:3000 对象服务器。

ECONNREFUSED的说明

解决方案二

就是修改代理规则 /api 为 @(/api)，至于原因我也不清楚，有知道的大佬还望告知一下，在此先感谢。

module.exports = {
    devServer: {
        proxy: {
            '@(/api)': {
                target: 'http://localhost:3000',
                bypass: function (req, res, proxyOptions) {
                    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);
                    }
                },
            },
        },
    },
}

配置完之后也没有报错

from localhost:8080 to http://localhost/qunar/api (econnrefused),Vue 技术栈,vue.js 文章来源地址https://www.toymoban.com/news/detail-559929.html

到了这里，关于Proxy error: Could not proxy request xxx from localhost:8080 to http://localhost:3000(ECONNREFUSED)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！