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

Question

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

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

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

如果可能的话，我想用 webpack-dev-server, or some other scriptable web framework like 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,
    }
  }
}

Answer 1

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

以下配置将通过 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,
    open: false,
    https: true,
    compress: false,
    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,
    stats: 'minimal',
    proxy: [
      {
        context: ['**', '!/test.html', '!/dist/**'],
        //This is the IP the site is running on. 
        target: "https://2607:f8b0:400f:805::2004/",
        secure: false,
        changeOrigin: false,
        autoRewrite: true,
        hostRewrite: true,
        logLevel: 'debug'
      }

    ]
  }

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

devServer: {
    hot: false,
    liveReload: true,
    open: false,
    https: true,
    compress: false,
    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,
    stats: 'minimal',
    proxy: [
      {
        context: ['**', '!/test.html', '!/dist/**', '!/pathOfFileToReplace/test.js'],

        //This is the IP the site is running on. 
        target: "https://2607:f8b0:400f:805::2004/",
        secure: false,
        changeOrigin: false,
        autoRewrite: true,
        hostRewrite: true,
        logLevel: 'debug'
      },
      {
        context: [
            '/pathOfFileToReplace/test.js',
        ],
        pathRewrite: {
          "/pathOfFileToReplace/" : "/dist/newPath/"
        },
        target: "https://google.com/",
        secure: false,
        changeOrigin: true,
        autoRewrite: true,
        hostRewrite: true,
        logLevel: 'debug'
      },
    ]
  }

一些注意事项：

除非不可避免，否则我不推荐这种方法。有几个理由不这样做，但最大的原因是有很多方法可以让你自己暴露在恶意攻击面前。
浏览器会存储 DNS 缓存一段时间，因此当您更新主机条目以代理站点时，您应该使用全新的私有 window.
当您使用网站的实际域名代理网站时，您会遇到证书错误。这是预料之中的，也是不可避免的，除非您可以获得所代理站点的证书。
您可以使用更多选项来进行完美设置。您可以在 https://webpack.js.org/configuration/dev-server/ and https://github.com/chimurai/http-proxy-middleware.

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

How can I set up a proxy for an unowned site to test front-end changes?

node.js

express

webpack

frontend

webpack-dev-server

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