VueJs-在vue.config中设置多个代理

Question

因此，我正在使用如下代理进行API调用：

vue.config.js:

module.exports = {
devServer: {
proxy: 'http://www.pathofexile.com/'
}
}

xxx.vue：

axios.get("http://localhost:8080/api/public-stash-tabs").then..

这很管用现在，当我想从不同的网站进行API调用时，我也不知道该怎么做。我想要这样的东西：

vue.config.js:

module.exports = {
devServer: {
proxy: {
'http://localhost:8080/one/': {
target: 'http://www.pathofexile.com/',
changeOrigin: true
},
'http://localhost:8080/two/': {
target: 'https://api.poe.watch/',
changeOrigin: true
}
}
}
}

xxx.vue：

axios.get("http://localhost:8080/one/api/public-stash-tabs").then..
axios.get("http://localhost:8080/two/id").then..

但似乎什么都没发生，我收到了一个404错误，因为它试图从http://localhost:8080/api/public-隐藏标签

我在这方面走对了吗？我只是错过了什么吗？或者这不是该走的路吗？

Answer 1

我还没有看到任何使用完整路径的例子。既然这显然对你有效(对我无效(，我不确定这会对你有帮助。尝试使用Webpack示例中的相对路径配置代理：

devServer: {
proxy: {
'/one': {
target: 'http://www.pathofexile.com/',
pathRewrite: {'^/one' : ''}
},
'/two': {
target: 'https://api.poe.watch/',
pathRewrite: {'^/two' : ''}
}
}
},

这里pathRewrite的目的是从目的地URL中删除匹配的部分。否则，它将被附加为："http://www.pathofexile.com/one...">

我现在正在服务器上测试这些规则，成功地使用您的URL(看到POEAPI响应(。不要忘记重新启动devServer，例如npm run serve