0

我正在尝试解决一个应用程序的独特问题，我需要使用 webpack dev-server 的proxy功能将特定请求代理到后端服务。

我遇到的问题是弄清楚如何处理一个奇怪的用例。

我有 Webpack DevServer (WDS) 为index.html带有多个客户端路由的单页应用程序提供服务。SPA 向需要代理的不同端点发出客户端 AJAX/fetch 请求。不幸的是，其中一个端点位于/服务器上，但仅适用于带有特定Content-Type标头的请求（我无法更改此服务正在侦听的路径，因此此处不能选择添加某种路径前缀）。

我尝试bypass在我的 WDS 配置中使用该选项来执行以下操作：

proxy: {
        "/": {
          target: "http://ows.local:6273",
          logLevel: "debug",
          secure: false,
          bypass: (req) => {
            console.log(`req.path => `, req.path)
            if (req.headers.accept.indexOf('html') !== -1) {
              console.log('Skipping proxy for HTML request.')
              return 'src/index.html'
            }
            return null
          }
        }
      }

问题出现在对 HTML 的初始调用中，WDS 应该通过编译.js和.css注入的捆绑包来提供服务。我得到的只是src/index.html没有注入资产的基础（没有注入<script>标签）。这是有道理的，因为我知道我在这里告诉代理，“不要将此请求代理到目标，只需提供此文件的内容”，但这不是我想要的。index.html我需要WDS 作为默认值的编译器，带有注入的资产。

所以这是我的问题，有一些特殊性：

我怎么能基本上告诉代理，“对于具有 的请求Content-type: application/json(or whatever)，继续将它们代理到target，但是对于 的调用HTML，不要代理，只提供 WDS 编译的index.html”？

4

1 回答 1

1

事实证明，解决这个问题所需要的只是调整bypass()函数的返回值。

proxy: {
        "/": {
          target: proxyTargetUtl,
          secure: false,
          logLevel: "debug",
          bypass: (req) => (req.headers.accept.includes("html") ? "/" : null)
        }
于 2019-12-24T00:36:12.293 回答