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

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

VueJs - Setting up multiple proxies in vue.config

proxy

webpack

vue.js

webpack-dev-server

vue-cli