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

Posted 2023-02-22

【中文标题】VueJs - 在 vue.config 中设置多个代理

【英文标题】：VueJs - Setting up multiple proxies in vue.config

【发布时间】：2020-08-01 01:40:04

【问题描述】：

所以我正在使用这样的代理进行 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 获取一些东西

我在正确的轨道上，我只是错过了什么吗？或者这不是要走的路？

【参考方案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

【讨论】：

嗨，丹，很遗憾，没有任何变化。

嗨。好的，我更新了我的答案。我现在不只是理论化，而是成功地使用这些实际规则与您的 axios URL 来查看 API。不要忘记重新编译npm run serve

谢谢丹！当你看到答案时，这些事情看起来也很简单。

哈哈，对吧？不客气。 pathRewrite 很大而且有点不直观。起初我没有想到它可能是因为你设法让绝对路径在没有它的情况下工作。很高兴它现在可以工作了。

请告诉我。如何使用相同的文件进行部署。表示在 npm run build 之后，然后将静态文件放在生产服务器的 htdocs 中。