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 examples 中的相对路径配置代理：

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