在 VueJS 应用程序中代理到不同的动态域

Question

在我们的 VueJS 应用程序中，我有一个从 API 返回的 URL，它指向 amer.example.com/put/stuff 我需要 PUT 一些数据。

显然，当我执行此 PUT 操作时，会出现 CORS 错误。为了解决这个问题，我有一个 devServer 代理设置，它说要重新路由所有 /put/stuff 以通过 example.com 像这样：

devServer: {
  port: 9034,
  proxy: {
    '/put/stuff': {
      target: 'amer.example.com',
    },
  },
},

瞧，事情又开始好了。

但是，从 API 返回的 URL 是动态的，可以指向另一个区域，例如 EMEA，emea.example.com/put/stuff 但 [=36= 中的所有其他区域]完全一样。

如何使代理动态化，以便它可以转到 amer.example.com、emea.example.com 或基于 URL 的任何其他区域我从另一个 [=32] 返回=].

我没有控制另一个API以及返回的URL的形状。

Answer 1

我能想到的唯一方法是丑陋的，但它应该有效。

TLDR

将该区域插入到您从 API 返回的 URL 的路径中，然后在代理中查找该路径。最后在代理中使用 pathRewrite 将其从 URL.

中删除

更长的解释

在 methods 中创建一个新函数，将区域插入 URL 路径，如下所示：

methods: {
  insertRegionIntoUrlPath(urlStr) {
    const url = new URL(urlStr);

    // Grab the region from the url, if it includes 'https://' then update the substring obviously).
    const regionPath = `/${url.hostname.substring(0,4)}`;

    // Set the path to now include the region in the beginning
    url.pathname = `${regionPath}${url.pathname}`;

    // Return the full URL that now contains the region: `https://amer.example.com/amer/put/stuff`
    return url.href;    
  },
}

然后您可以在 PUT 发生的任何地方使用此函数将区域添加到 URL 路径中。

我假设您的区域总是 4 个字符长，如果可能不同，那么只需使用一些正则表达式来提取子域。

然后在您的代理设置中，您现在可以定位您想要的特定区域路径并删除您添加的部分路径，如下所示：

module.exports = {
  devServer: {
    proxy: {
      '/amer': {
        target: 'https://amer.example.com',
        pathRewrite: {'^/amer' : ''} // Removing `/amer` from the path
      },
      '/emea': {
        target: 'https://emea.example.com/',
        pathRewrite: {'^/emea' : ''} // Removing `/emea` from the path
      }
    }
  }
};

所以现在您所做的是从 API 中获取 URL，将区域添加到路径中并发出 PUT 请求，最后代理接收这些请求，因为它们将匹配像 /amer 这样的区域路径，然后我们只需让代理在发送请求之前从 URL 中删除该部分。

在 VueJS 应用程序中代理到不同的动态域

Proxying to different dynamic domains in a VueJS app

javascript

http-proxy

vue.js

TLDR

更长的解释