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

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

太长,读不下去了

将区域插入到从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中删除该部分。