如何为无主站点设置代理以测试前端更改？

编程问答 2022-05-17

问题描述

我想设置一个代理，方便本地前端开发。

例如，如果我转到 https://google.com/，所有文件都是从 Google 加载的，除了一些定义的文件集，如所有 *.css 文件，它们来自文件系统。

现在我正在使用 fiddler 来实现这个目标，但它是非常手动的，并且不容易为其他开发人员设置。如果 fiddler 可以实现，我假设可以自动化该设置。我尝试了很多配置并研究了

如果可能，我想使用 webpack-dev-server 或其他一些可编写脚本的 Web 框架（如 Express）来实现这一点。开发人员可以访问他们的主机文件以进行可能需要的任何本地 DNS 更改。理想情况下，该设置适用于 Windows 和 Mac，但 Windows 是更大的目标。

以下是 webpack devserver 配置的示例：

devServer: {
  hot: false,open: true,liveReload: false,https: true,watchContentBase: true,compress: false,allowedHosts: [
    'google.com'
  ],host: "google.com",proxy: {
    "*.css": {
      target: "http://localhost:3000"
    },"*": {
      target: "https://google.com/",secure: false,changeOrigin: true,}
  }
}

解决方法

我能够找出实现所需的各种配置选项。以下是我为获得可用代理而经历的一些变体。我使用过 google.com 的所有地方都可以替换为您想要的任何外部主机。每个代理的上下文都使用 glob 模式，因此您可以捕获/忽略您想要的任何内容。

以下配置将通过 https://localhost:3000 为您提供完全可用的 https://google.com，除了 /test.html 和 /dist 中的所有内容。如果您的开发文件结构与网站文件结构匹配，这将非常有效。 

devServer: {
    liveReload: true,open: false,https: true,compress: false,port: 3000,stats: 'minimal',proxy: [
      {
        context: ['**','!/test.html','!/dist/**'],target: "https://google.com/",secure: false,changeOrigin: true,autoRewrite: true,hostRewrite: true,logLevel: 'debug'
      }

    ]
  }

此配置允许您拥有与外部站点完全相同的域名。这需要您添加一个主机条目以将域指向本地计算机。如果您正在处理的站点有一些需要正确域名的重定向或身份验证，则可能需要这样做。这还假设您尝试替换的文件在您的开发环境中具有相同的结构。

devServer: {
    hot: false,liveReload: true,public: 'google.com',host: "google.com",//You must match the port the site is served on. On an windows machine you will have to stop IIS to let webpack devServer run on 443
    port: 443,//This is the IP the site is running on. 
        target: "https://2607:f8b0:400f:805::2004/",changeOrigin: false,logLevel: 'debug'
      }

    ]
  }

此配置允许您重写请求文件的路径。它使用两个代理来实现这一目标。第一个代理就像前面的代理一样，捕获所有指定模式的流量。第二个重写您指定的任何请求的路径，并使用新路径转发请求。 pathRewrite 属性接受一个函数，因此您可以根据需要变得尽可能复杂。

devServer: {
    hot: false,'!/dist/**','!/pathOfFileToReplace/test.js'],logLevel: 'debug'
      },{
        context: [
            '/pathOfFileToReplace/test.js',],pathRewrite: {
          "/pathOfFileToReplace/" : "/dist/newPath/"
        },]
  }

一些注意事项：

  • 除非不可避免，否则我不推荐这种方法。不这样做的原因有很多，但最大的原因是您可以通过多种方式让自己遭受恶意攻击。
  • 浏览器会暂时存储 DNS 缓存，因此当您更新主机条目以代理站点时，您应该使用全新的私有窗口。
  • 当您使用网站的实际域名代理网站时，您会收到证书错误。这是意料之中的，并且不可避免，除非您可以获得所代理站点的证书。
  • 您可以使用更多选项来进行完美的设置。您可以在 https://webpack.js.org/configuration/dev-server/ 和 https://github.com/chimurai/http-proxy-middleware 中找到它们。
expressexpressexpressfrontendwebpackwebpackwebpackwebpack-dev-server