diff --git a/web/src/pages/Route/Create.tsx b/web/src/pages/Route/Create.tsx
index 870b86d072..396008c0c5 100644
--- a/web/src/pages/Route/Create.tsx
+++ b/web/src/pages/Route/Create.tsx
@@ -100,12 +100,14 @@ const Page: React.FC<Props> = (props) => {
           form={form1}
           advancedMatchingRules={advancedMatchingRules}
           onChange={({ action, data }) => {
-            if (action === 'redirectOptionChange' && data === 'customRedirect') {
-              setStepHeader(STEP_HEADER_2);
-              setRedirect(true);
-            } else {
-              setStepHeader(STEP_HEADER_4);
-              setRedirect(false);
+            if (action === 'redirectOptionChange') {
+              if (data === 'customRedirect') {
+                setStepHeader(STEP_HEADER_2);
+                setRedirect(true);
+              } else {
+                setStepHeader(STEP_HEADER_4);
+                setRedirect(false);
+              }
             }
             if (action === 'advancedMatchingRulesChange') {
               setAdvancedMatchingRules(data);
@@ -137,6 +139,7 @@ const Page: React.FC<Props> = (props) => {
       return (
         <Step3
           data={step3Data}
+          isForceHttps={form1.getFieldValue('redirectOption') === 'forceHttps'}
           onChange={({ plugins, script = INIT_CHART }) => {
             setStep3Data({ plugins, script });
             setChart(script);
@@ -249,11 +252,10 @@ const Page: React.FC<Props> = (props) => {
   return (
     <>
       <PageHeaderWrapper
-        title={`${
-          (props as any).match.params.rid
+        title={`${(props as any).match.params.rid
             ? formatMessage({ id: 'component.global.edit' })
             : formatMessage({ id: 'component.global.create' })
-        } ${formatMessage({ id: 'menu.routes' })}`}
+          } ${formatMessage({ id: 'menu.routes' })}`}
       >
         <Card bordered={false}>
           <Steps current={step - 1} className={styles.steps}>
diff --git a/web/src/pages/Route/components/Step3/index.tsx b/web/src/pages/Route/components/Step3/index.tsx
index ae6a606b68..fcc6b01641 100644
--- a/web/src/pages/Route/components/Step3/index.tsx
+++ b/web/src/pages/Route/components/Step3/index.tsx
@@ -29,15 +29,19 @@ type Props = {
   };
   onChange(data: { plugins: PluginPageType.FinalData; script: any }): void;
   readonly?: boolean;
+  isForceHttps: boolean
 };
 
 type Mode = 'NORMAL' | 'DRAW';
 
-const Page: React.FC<Props> = ({ data, onChange, readonly = false }) => {
+const Page: React.FC<Props> = ({ data, onChange, readonly = false, isForceHttps }) => {
   const { plugins = {}, script = {} } = data;
 
   // NOTE: Currently only compatible with chrome
-  const type = Object.keys(script || {}).length === 0 || !isChrome ? 'NORMAL' : 'DRAW';
+  const disableDraw = !isChrome || isForceHttps;
+
+  const type = Object.keys(script || {}).length === 0 || disableDraw ? 'NORMAL' : 'DRAW';
+
   const [mode, setMode] = useState<Mode>(type);
 
   return (
@@ -51,31 +55,48 @@ const Page: React.FC<Props> = ({ data, onChange, readonly = false }) => {
           style={{ marginBottom: 10 }}
         >
           <Radio.Button value="NORMAL">普通模式</Radio.Button>
-          <Radio.Button value="DRAW" disabled={!isChrome}>
+          <Radio.Button value="DRAW" disabled={disableDraw}>
             插件编排
           </Radio.Button>
         </Radio.Group>
-        {Boolean(!isChrome) && (
+        {Boolean(disableDraw) && (
           <div style={{ marginLeft: '10px' }}>
-            <Tooltip placement="right" title="插件编排仅支持 Chorme 浏览器">
+            <Tooltip placement="right" title={() => {
+              // NOTE: forceHttps do not support DRAW mode
+              // TODO: i18n
+              const titleArr: string[] = [];
+              if (!isChrome) {
+                titleArr.push('插件编排仅支持 Chrome 浏览器。');
+              }
+              if (isForceHttps) {
+                titleArr.push('当步骤一中 重定向 选择为 启用 HTTPS 时，不可使用插件编排模式。');
+              }
+              return (
+                titleArr.map((item, index) => `${index + 1}.${item}`).join("")
+              )
+            }}>
               <QuestionCircleOutlined />
             </Tooltip>
           </div>
         )}
       </div>
-      {Boolean(mode === 'NORMAL') && (
-        <PluginPage
-          initialData={plugins}
-          onChange={(pluginsData) => onChange({ plugins: pluginsData, script: {} })}
-        />
-      )}
-      {Boolean(mode === 'DRAW') && (
-        <PluginOrchestration
-          data={script?.chart}
-          onChange={(scriptData) => onChange({ plugins: {}, script: scriptData })}
-          readonly={readonly}
-        />
-      )}
+      {
+        Boolean(mode === 'NORMAL') && (
+          <PluginPage
+            initialData={plugins}
+            onChange={(pluginsData) => onChange({ plugins: pluginsData, script: {} })}
+          />
+        )
+      }
+      {
+        Boolean(mode === 'DRAW') && (
+          <PluginOrchestration
+            data={script?.chart}
+            onChange={(scriptData) => onChange({ plugins: {}, script: scriptData })}
+            readonly={readonly}
+          />
+        )
+      }
     </>
   );
 };
diff --git a/web/src/pages/Route/transform.ts b/web/src/pages/Route/transform.ts
index cd1215a834..1894ed353a 100644
--- a/web/src/pages/Route/transform.ts
+++ b/web/src/pages/Route/transform.ts
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { omit, pick } from 'lodash';
+import { omit, pick, cloneDeep } from 'lodash';
 
 export const transformStepData = ({
   form1Data,
@@ -23,8 +23,9 @@ export const transformStepData = ({
   step3Data,
 }: RouteModule.RequestData) => {
   let redirect: RouteModule.Redirect = {};
+  const step3DataCloned = cloneDeep(step3Data);
   if (form1Data.redirectOption === 'disabled') {
-    redirect = {};
+    step3DataCloned.plugins = omit(step3Data.plugins, ['redirect']);
   } else if (form1Data.redirectOption === 'forceHttps') {
     redirect = { http_to_https: true };
   } else if (form1Data.redirectURI !== '') {
@@ -36,7 +37,7 @@ export const transformStepData = ({
 
   const data: Partial<RouteModule.Body> = {
     ...form1Data,
-    ...step3Data,
+    ...step3DataCloned,
     vars: advancedMatchingRules.map((rule) => {
       const { operator, position, name, value } = rule;
       let key = '';
@@ -54,15 +55,21 @@ export const transformStepData = ({
     }),
   };
 
-  // 未启用 redirect
-  if (!redirect.uri) {
+  if (Object.keys(redirect).length === 0 || redirect.http_to_https) {
     if (form2Data.upstream_id) {
       data.upstream_id = form2Data.upstream_id;
     } else {
       data.upstream = form2Data;
     }
 
-    // 移除前端部分自定义变量
+    if (redirect.http_to_https) {
+      if (Object(data.plugins).length === 0) {
+        data.plugins = {};
+      }
+      data.plugins!.redirect = redirect;
+    }
+
+    // Remove some of the front-end custom variables
     return omit(data, [
       'advancedMatchingRules',
       'upstreamHostList',
@@ -71,8 +78,8 @@ export const transformStepData = ({
       'redirectURI',
       'ret_code',
       'redirectOption',
-      !Object.keys(step3Data.plugins || {}).length ? 'plugins' : '',
-      !Object.keys(step3Data.script || {}).length ? 'script' : '',
+      !Object.keys(step3DataCloned.plugins || {}).length ? 'plugins' : '',
+      !Object.keys(step3DataCloned.script || {}).length ? 'script' : '',
       form1Data.hosts.filter(Boolean).length === 0 ? 'hosts' : '',
       form1Data.redirectOption === 'disabled' ? 'redirect' : '',
     ]);
@@ -133,17 +140,15 @@ export const transformRouteData = (data: RouteModule.Body) => {
     methods,
   };
 
-  if (data.plugins) {
-    const { redirect } = data.plugins;
-    if (redirect?.http_to_https) {
-      form1Data.redirectOption = 'forceHttps';
-    } else if (redirect?.uri) {
-      form1Data.redirectOption = 'customRedirect';
-      form1Data.ret_code = redirect?.ret_code;
-      form1Data.redirectURI = redirect?.uri;
-    } else {
-      form1Data.redirectOption = 'disabled';
-    }
+  const redirect = data.plugins?.redirect || {};
+  if (redirect?.http_to_https) {
+    form1Data.redirectOption = 'forceHttps';
+  } else if (redirect?.uri) {
+    form1Data.redirectOption = 'customRedirect';
+    form1Data.ret_code = redirect?.ret_code;
+    form1Data.redirectURI = redirect?.uri;
+  } else {
+    form1Data.redirectOption = 'disabled';
   }
 
   const advancedMatchingRules: RouteModule.MatchingRule[] = transformVarsToRules(vars);