webpack - 如何使用 Webpack 的 http-proxy-middleware 将 _some_ 请求代理到“/”?
问题描述
我正在尝试解决一个应用程序的独特问题,我需要使用 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
”?
解决方案
事实证明,解决这个问题所需要的只是调整bypass()
函数的返回值。
proxy: {
"/": {
target: proxyTargetUtl,
secure: false,
logLevel: "debug",
bypass: (req) => (req.headers.accept.includes("html") ? "/" : null)
}
推荐阅读
- google-app-engine - 无法访问受版本控制的 Google App Engine 网站
- angular6 - 为什么我在 `http.get().pipe()` 上得到“未定义”
- reactjs - React Native 通过 API 调用访问图像
- testng - 为什么推荐使用 TestNGCitrusTestRunner 而不是 TestNGCitrusTestDesigner?
- windows - 无论是谁创建的,本地用户获取所有任务计划的最低权限是多少
- jakarta-ee - 这个 java.net.ConnectException 的根本原因可能是什么,以及如何解决它?
- json - Angular 6 POST 响应 - 空数组,不同于 Postman
- c# - Xamarin.iOS - 翻译后的 UIView 在导航到另一个页面时重置
- python - word2vec 用于单词字典
- vba - 等到查询完成?