反向代理支持RequestPath、RequestURI等

2025-11-03 20:40:26 +08:00 · 2020-09-27 10:03:00 +08:00
parent 7be35b2965
commit 09763d4d60
20 changed files with 281 additions and 165 deletions
--- a/web/public/js/components/server/http-web-root-box.js
+++ b/web/public/js/components/server/http-web-root-box.js
@@ -42,6 +42,7 @@ Vue.component("http-web-root-box", {
 		}
 	},
 	template: `<div>
+	<p class="ui message">在这里可以设置如何分发静态文件资源。</p>
 	<input type="hidden" name="rootJSON" :value="JSON.stringify(rootConfig)"/>
 	<table class="ui table selectable definition">
 		<prior-checkbox :v-config="rootConfig" v-if="vIsLocation"></prior-checkbox>
@@ -86,7 +87,7 @@ Vue.component("http-web-root-box", {
 				<td>去除URL前缀</td>
 				<td>
 					<input type="text" v-model="rootConfig.stripPrefix" placeholder="/PREFIX"/>
-					<p class="comment">可以把请求的路径部分前缀去除后再查找文件，比如把 <span class="ui label tiny">/web/app/index.html</span> 去除前缀 <span class="ui label tiny">/web</span> 后就变成 <span class="ui label tiny">/app/index.html</span> </p>
+					<p class="comment">可以把请求的路径部分前缀去除后再查找文件，比如把 <span class="ui label tiny">/web/app/index.html</span> 去除前缀 <span class="ui label tiny">/web</span> 后就变成 <span class="ui label tiny">/app/index.html</span>。 </p>
 				</td>
 			</tr>
 			<tr>
--- a/web/public/js/components/server/http-websocket-box.js
+++ b/web/public/js/components/server/http-websocket-box.js
@@ -91,7 +91,7 @@ Vue.component("http-websocket-box", {
 		</tbody>
 		<tbody v-show="isOn()">
 			<tr>
-				<td>允许所有来源域<em>（Origin）</em></td>
+				<td class="color-border">允许所有来源域<em>（Origin）</em></td>
 				<td>
 					<div class="ui checkbox">
 						<input type="checkbox" v-model="websocketConfig.allowAllOrigins"/>
@@ -103,7 +103,7 @@ Vue.component("http-websocket-box", {
 		</tbody>
 		<tbody v-show="isOn() && !websocketConfig.allowAllOrigins">
 			<tr>
-				<td>允许的来源域列表<em>（Origin）</em></td>
+				<td class="color-border">允许的来源域列表<em>（Origin）</em></td>
 				<td>
 					<div v-if="websocketConfig.allowedOrigins.length > 0">
 						<div class="ui label tiny" v-for="(origin, index) in websocketConfig.allowedOrigins">
@@ -119,7 +119,7 @@ Vue.component("http-websocket-box", {
 		<more-options-tbody @change="changeAdvancedVisible" v-show="isOn()"></more-options-tbody>
 		<tbody v-show="isOn() && advancedVisible">
 			<tr>
-				<td>是否传递请求来源域</td>
+				<td class="color-border">是否传递请求来源域</td>
 				<td>
 					<div class="ui checkbox">
 						<input type="checkbox" v-model="websocketConfig.requestSameOrigin"/>
@@ -131,7 +131,7 @@ Vue.component("http-websocket-box", {
 		</tbody>
 		<tbody v-show="isOn() && advancedVisible && !websocketConfig.requestSameOrigin">
 			<tr>
-				<td>指定传递的来源域</td>
+				<td class="color-border">指定传递的来源域</td>
 				<td>
 					<input type="text" v-model="websocketConfig.requestOrigin" maxlength="200"/>
 					<p class="comment">指定向源站传递的<span class="ui label tiny">Origin</span>字段值。</p>
--- a/web/public/js/components/server/origin-list-box.js
+++ b/web/public/js/components/server/origin-list-box.js
@@ -41,7 +41,7 @@ Vue.component("origin-list-box", {
 	},
 	template: `<div>
 	<h3>主要源站 <a href="" @click.prevent="createPrimaryOrigin()">[添加主要源站]</a> </h3>
-	<p class="comment" v-if="primaryOrigins.length == 0">暂时还没有优先源站。</p>
+	<p class="comment" v-if="primaryOrigins.length == 0">暂时还没有主要源站。</p>
 	<origin-list-table v-if="primaryOrigins.length > 0" :v-origins="vPrimaryOrigins" :v-origin-type="'primary'" @deleteOrigin="deleteOrigin" @updateOrigin="updateOrigin"></origin-list-table>

 	<h3>备用源站 <a href="" @click.prevent="createBackupOrigin()">[添加备用源站]</a></h3>
--- a/web/public/js/components/server/reverse-proxy-box.js
+++ b/web/public/js/components/server/reverse-proxy-box.js
@@ -1,5 +1,5 @@
 Vue.component("reverse-proxy-box", {
-	props: ["v-reverse-proxy-ref", "v-is-location"],
+	props: ["v-reverse-proxy-ref", "v-reverse-proxy-config", "v-is-location"],
 	data: function () {
 		let reverseProxyRef = this.vReverseProxyRef
 		if (reverseProxyRef == null) {
@@ -9,12 +9,32 @@ Vue.component("reverse-proxy-box", {
 				reverseProxyId: 0
 			}
 		}
+
+		let reverseProxyConfig = this.vReverseProxyConfig
+		if (reverseProxyConfig == null) {
+			reverseProxyConfig = {
+				requestPath: "",
+				stripPrefix: "",
+				requestURI: ""
+			}
+		}
 		return {
-			reverseProxyRef: reverseProxyRef
+			reverseProxyRef: reverseProxyRef,
+			reverseProxyConfig: reverseProxyConfig,
+			advancedVisible: false
+		}
+	},
+	methods:  {
+		isOn: function () {
+			return (!this.vIsLocation || this.reverseProxyRef.isPrior) && this.reverseProxyRef.isOn
+		},
+		changeAdvancedVisible: function (v) {
+			this.advancedVisible = v
 		}
 	},
 	template: `<div>
 	<input type="hidden" name="reverseProxyRefJSON" :value="JSON.stringify(reverseProxyRef)"/>
+	<input type="hidden" name="reverseProxyJSON" :value="JSON.stringify(reverseProxyConfig)"/>
 	<table class="ui table selectable definition">
 		<prior-checkbox :v-config="reverseProxyRef" v-if="vIsLocation"></prior-checkbox>
 		<tbody v-show="!vIsLocation || reverseProxyRef.isPrior">
@@ -28,6 +48,30 @@ Vue.component("reverse-proxy-box", {
 				</td>
 			</tr>
 		</tbody>
+		<more-options-tbody @change="changeAdvancedVisible" v-if="isOn()"></more-options-tbody>
+		<tbody v-show="isOn() && advancedVisible">
+			<tr>
+				<td>请求主机名<em>（Host）</em></td>
+				<td>
+					<input type="text" placeholder="比如example.com" v-model="reverseProxyConfig.requestHost"/>
+					<p class="comment">请求后端服务器时的Host，用于修改后端服务器接收到的域名，默认和客户端请求的主机名一致，通常不必填写，支持请求变量。</p>
+				</td>
+			</tr>
+			<tr>
+				<td>请求URI</td>
+				<td>
+					<input type="text" placeholder="\${requestURI}" v-model="reverseProxyConfig.requestURI"/>
+					<p class="comment">\${requestURI}为完整的请求URI，可以使用类似于"\${requestURI}?arg1=value1&arg2=value2"的形式添加你的参数。</p>
+				</td>
+			</tr>
+			<tr>
+				<td>去除URL前缀</td>
+				<td>
+					<input type="text" v-model="reverseProxyConfig.stripPrefix" placeholder="/PREFIX"/>
+					<p class="comment">可以把请求的路径部分前缀去除后再查找文件，比如把 <span class="ui label tiny">/web/app/index.html</span> 去除前缀 <span class="ui label tiny">/web</span> 后就变成 <span class="ui label tiny">/app/index.html</span>。 </p>
+				</td>
+			</tr>
+		</tbody>
 	</table>
 	<div class="margin"></div>
 </div>`
--- a/web/views/@default/servers/server/settings/locations/reverseProxy/@menu.html
+++ b/web/views/@default/servers/server/settings/locations/reverseProxy/@menu.html
@@ -1,4 +1,5 @@
 <first-menu>
 	<menu-item :href="'/servers/server/settings/locations/reverseProxy?serverId=' + serverId + '&locationId=' + locationId" code="index">源站列表</menu-item>
 	<menu-item :href="'/servers/server/settings/locations/reverseProxy/scheduling?serverId=' + serverId + '&locationId=' + locationId" code="scheduling">调度算法</menu-item>
+	<menu-item :href="'/servers/server/settings/locations/reverseProxy/setting?serverId=' + serverId + '&locationId=' + locationId" code="setting">更多设置</menu-item>
 </first-menu>
--- a/web/views/@default/servers/server/settings/locations/reverseProxy/index.html
+++ b/web/views/@default/servers/server/settings/locations/reverseProxy/index.html
@@ -8,17 +8,13 @@
 	<div class="right-box tiny">
 		{$template "menu"}
 		<div class="margin"></div>
-		<form class="ui form" data-tea-action="$" data-tea-success="success">
-			<input type="hidden" name="locationId" :value="locationId"/>
-			<reverse-proxy-box :v-reverse-proxy-ref="reverseProxyRef" :v-is-location="true"></reverse-proxy-box>
-			<submit-btn></submit-btn>
-		</form>
-
-		<div v-if="reverseProxyRef.isPrior && reverseProxyRef.isOn">
-			<div class="ui divider"></div>
-			<origin-list-box :v-primary-origins="primaryOrigins" :v-backup-origins="backupOrigins"
-							 :v-server-type="serverType"
-							 :v-params="'type=server&serverId=' + serverId + '&reverseProxyId=' + reverseProxyConfig.id"></origin-list-box>
+		<div v-if="!reverseProxyRef.isPrior || !reverseProxyRef.isOn">
+			<div class="margin"></div>
+			<p class="ui message warning">当前代理服务没有开启，可以通过点击 <a :href="'/servers/server/settings/locations/reverseProxy/setting?serverId=' + serverId + '&locationId=' + locationId">[更多设置]</a> 开启 。</p>
 		</div>
+
+		<origin-list-box :v-primary-origins="primaryOrigins" :v-backup-origins="backupOrigins"
+						 :v-server-type="serverType"
+						 :v-params="'type=server&serverId=' + serverId + '&reverseProxyId=' + reverseProxyConfig.id"></origin-list-box>
 	</div>
 </div>
--- a/web/views/@default/servers/server/settings/locations/reverseProxy/setting.html
+++ b/web/views/@default/servers/server/settings/locations/reverseProxy/setting.html
@@ -0,0 +1,20 @@
+{$layout}
+{$template "/left_menu"}
+
+<div class="right-box">
+	{$template "../location_menu"}
+	{$template "../left_menu"}
+
+	<div class="right-box tiny">
+		{$template "menu"}
+		<div class="margin"></div>
+		<form class="ui form" data-tea-action="$" data-tea-success="success">
+			<input type="hidden" name="locationId" :value="locationId"/>
+			<input type="hidden" name="reverseProxyRefJSON" :value="JSON.stringify(reverseProxyRef)"/>
+			<reverse-proxy-box :v-reverse-proxy-ref="reverseProxyRef"
+							   :v-reverse-proxy-config="reverseProxyConfig"
+							   :v-is-location="true"></reverse-proxy-box>
+			<submit-btn></submit-btn>
+		</form>
+	</div>
+</div>
--- a/web/views/@default/servers/server/settings/locations/reverseProxy/setting.js
+++ b/web/views/@default/servers/server/settings/locations/reverseProxy/setting.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyReloadSuccess("保存成功")
+})
--- a/web/views/@default/servers/server/settings/reverseProxy/@menu.html
+++ b/web/views/@default/servers/server/settings/reverseProxy/@menu.html
@@ -1,4 +1,5 @@
 <first-menu>
 	<menu-item :href="'/servers/server/settings/reverseProxy?serverId=' + serverId" code="index">源站列表</menu-item>
 	<menu-item :href="'/servers/server/settings/reverseProxy/scheduling?serverId=' + serverId" code="scheduling">调度算法</menu-item>
+	<menu-item :href="'/servers/server/settings/reverseProxy/setting?serverId=' + serverId" code="setting">更多设置</menu-item>
 </first-menu>
--- a/web/views/@default/servers/server/settings/reverseProxy/index.html
+++ b/web/views/@default/servers/server/settings/reverseProxy/index.html
@@ -4,17 +4,12 @@
 <div class="right-box">
 	{$template "menu"}

-	<div class="margin"></div>
-	<form class="ui form" data-tea-action="$" data-tea-success="success">
-		<input type="hidden" name="serverId" :value="serverId"/>
-		<input type="hidden" name="reverseProxyRefJSON" :value="JSON.stringify(reverseProxyRef)"/>
-		<reverse-proxy-box :v-reverse-proxy-ref="reverseProxyRef"></reverse-proxy-box>
-		<submit-btn></submit-btn>
-	</form>
-
-	<div v-if="reverseProxyRef.isOn">
-		<div class="ui divider"></div>
-		<origin-list-box :v-primary-origins="primaryOrigins" :v-backup-origins="backupOrigins" :v-server-type="serverType"
-					 :v-params="'type=server&serverId=' + serverId + '&reverseProxyId=' + reverseProxyConfig.id"></origin-list-box>
+	<div v-if="!reverseProxyRef.isOn">
+		<div class="margin"></div>
+		<p class="ui message warning">当前代理服务没有开启，可以通过点击 <a :href="'/servers/server/settings/reverseProxy/setting?serverId=' + serverId">[更多设置]</a> 开启 。</p>
 	</div>
+
+	<origin-list-box :v-primary-origins="primaryOrigins" :v-backup-origins="backupOrigins"
+					 :v-server-type="serverType"
+					 :v-params="'type=server&serverId=' + serverId + '&reverseProxyId=' + reverseProxyConfig.id"></origin-list-box>
 </div>
--- a/web/views/@default/servers/server/settings/reverseProxy/index.js
+++ b/web/views/@default/servers/server/settings/reverseProxy/index.js
@@ -1,17 +0,0 @@
-Tea.context(function () {
-	this.success = NotifyReloadSuccess("保存成功")
-
-	this.updateOn = function (b) {
-		teaweb.confirm(b ? "确定要启用反向代理服务吗？" : "确定要停用反向代理服务吗？", function () {
-			this.$post(".updateOn")
-				.params({
-					"serverId": this.serverId,
-					"isOn": b ? 1 : 0,
-					"reverseProxyId": this.reverseProxyId
-				})
-				.success(function () {
-					window.location.reload()
-				})
-		})
-	}
-})
--- a/web/views/@default/servers/server/settings/reverseProxy/setting.html
+++ b/web/views/@default/servers/server/settings/reverseProxy/setting.html
@@ -0,0 +1,14 @@
+{$layout}
+{$template "/left_menu"}
+
+<div class="right-box">
+	{$template "menu"}
+
+	<div class="margin"></div>
+	<form class="ui form" data-tea-action="$" data-tea-success="success">
+		<input type="hidden" name="serverId" :value="serverId"/>
+		<input type="hidden" name="reverseProxyRefJSON" :value="JSON.stringify(reverseProxyRef)"/>
+		<reverse-proxy-box :v-reverse-proxy-ref="reverseProxyRef" :v-reverse-proxy-config="reverseProxyConfig"></reverse-proxy-box>
+		<submit-btn></submit-btn>
+	</form>
+</div>
--- a/web/views/@default/servers/server/settings/reverseProxy/setting.js
+++ b/web/views/@default/servers/server/settings/reverseProxy/setting.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyReloadSuccess("保存成功")
+})