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-stash-tabs获取某些内容

我是否走在正确的轨道上，我是否错过了一些东西？或者这不是要走的路？

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（查看 POE api 响应）。不要忘记重新启动 devServer，例如npm run serve