feat: allow using https api

geekdada · geekdada · commit 09473051a459 · 2021-03-29T15:19:30.000+08:00
diff --git a/src/App.tsx b/src/App.tsx
@@ -130,14 +130,7 @@ const App: React.FC = () => {
     if (result) {
       currentProfile.current = result
 
-      if (result.helperHost && result.helperPort) {
-        setServer(result.host, result.port, result.key, {
-          helperHost: result.helperHost,
-          helperPort: result.helperPort,
-        })
-      } else {
-        setServer(result.host, result.port, result.key)
-      }
+      setServer(result.host, result.port, result.key, { tls: result.tls })
     } else {
       history.replace('/')
     }
diff --git a/src/components/ProfileCell/index.tsx b/src/components/ProfileCell/index.tsx
@@ -9,7 +9,6 @@ import { Bin, PaperPlane } from '@sumup/icons'
 import { IconButton } from '@sumup/circuit-ui'
 
 import { Profile } from '../../types'
-import { bareFetcher } from '../../utils/fetcher'
 
 interface ProfileCellProps {
   profile: Profile
@@ -66,25 +65,17 @@ const ProfileCell: React.FC<ProfileCellProps> = ({
     let isMounted = true
 
     if (checkConnectivity) {
-      const options =
-        profile.helperHost && profile.helperPort
-          ? {
-              helperHost: profile.helperHost,
-              helperPort: Number(profile.helperPort),
-            }
-          : undefined
-
-      bareFetcher(
-        {
-          url: `http://${profile.host}:${profile.port}/v1/outbound`,
+      axios
+        .request({
+          url: `${profile.tls ? 'https' : 'http'}://${profile.host}:${
+            profile.port
+          }/v1/outbound`,
           method: 'GET',
           headers: {
             'x-key': profile.key,
           },
           timeout: 3000,
-        },
-        options,
-      )
+        })
         .then(() => {
           if (isMounted) setAvailable(true)
         })
@@ -124,19 +115,6 @@ const ProfileCell: React.FC<ProfileCellProps> = ({
             </div>
           )}
           <div tw="flex items-center font-mono text-gray-600 text-xs md:text-sm truncate leading-none">
-            {!!profile.helperHost && (
-              <div
-                title={`Helper: ${profile.helperHost}:${profile.helperPort}`}
-                tw="cursor-pointer">
-                <PaperPlane
-                  css={css`
-                    width: 1rem;
-                    height: 1rem;
-                    margin-right: 0.25rem;
-                  `}
-                />
-              </div>
-            )}
             <span>
               {profile.host}:{profile.port}
             </span>
diff --git a/src/pages/Landing/index.tsx b/src/pages/Landing/index.tsx
@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core'
+import axios from 'axios'
 import React, {
   FormEventHandler,
   useCallback,
@@ -20,20 +21,15 @@ import Ad from '../../components/Ad'
 import useSetState from '../../hooks/use-set-state'
 import { Profile } from '../../types'
 import { ExistingProfiles, LastUsedProfile } from '../../utils/constant'
-import { bareFetcher } from '../../utils/fetcher'
 
 const Page: React.FC = () => {
   const history = useHistory()
   const protocol = window.location.protocol
   const [name, setName] = useState<string | undefined>()
   const [host, setHost] = useState<string | undefined>()
-  const [helperHost, setHelperHost] = useState<string | undefined>()
   const [port, setPort] = useState<string | undefined>()
-  const [helperPort, setHelperPort] = useState<string | undefined>()
   const [key, setKey] = useState<string | undefined>()
-  const [useHelper, setUseHelper] = useState<boolean>(
-    () => protocol === 'https:',
-  )
+  const [useTls, setUseTls] = useState<boolean>(() => protocol === 'https:')
   const [
     existingProfiles,
     setExistingProfiles,
@@ -84,8 +80,7 @@ const Page: React.FC = () => {
     setHost('')
     setPort('')
     setKey('')
-    setHelperHost('')
-    setHelperPort('')
+    setUseTls(protocol === 'https:')
   }
 
   const onSubmit: FormEventHandler = (e) => {
@@ -97,25 +92,15 @@ const Page: React.FC = () => {
 
     setIsLoading(true)
 
-    const options =
-      useHelper && helperHost && helperPort
-        ? {
-            helperHost,
-            helperPort: Number(helperPort),
-          }
-        : undefined
-
-    bareFetcher(
-      {
-        url: `http://${host}:${port}/v1/outbound`,
+    axios
+      .request({
+        url: `${useTls ? 'https' : 'http'}://${host}:${port}/v1/outbound`,
         method: 'GET',
         timeout: 3000,
         headers: {
           'x-key': key,
         },
-      },
-      options,
-    )
+      })
       .then((res) => {
         setHasError(false)
 
@@ -129,8 +114,7 @@ const Page: React.FC = () => {
             : 'ios',
           platformVersion: res.headers['x-surge-version'] || '',
           platformBuild: res.headers['x-surge-build'] || '',
-          helperHost: helperHost,
-          helperPort: Number(helperPort),
+          tls: useTls,
         })
 
         resetFields()
@@ -184,16 +168,8 @@ const Page: React.FC = () => {
             </a>
           </p>
           <p tw="leading-normal mb-2">
-            您已可通过 yasd-helper 实现 HTTPS 访问 Surge API。
-          </p>
-          <p tw="leading-normal">
-            <a
-              href="https://github.com/geekdada/yasd-helper"
-              target="_blank"
-              rel="noreferrer"
-              tw="border-b border-solid border-teal-500">
-              🔗 查看
-            </a>
+            Surge Mac v4.0.6 (1280) 开始已支持开启 HTTPS API，故不再支持使用
+            yasd-helper。
           </p>
         </div>
 
@@ -243,43 +219,16 @@ const Page: React.FC = () => {
               setKey((target as HTMLInputElement).value)
             }
           />
-          <div>
-            <div>
-              <Checkbox
-                disabled={protocol === 'https:'}
-                checked={useHelper}
-                onChange={() => setUseHelper((prev) => !prev)}>
-                使用 yasd-helper 中转
-              </Checkbox>
-            </div>
 
-            {useHelper && (
-              <React.Fragment>
-                <Input
-                  type="text"
-                  required={protocol === 'https:'}
-                  invalid={!!hasError}
-                  label="Helper Host"
-                  placeholder="192.168.1.2.nip.io"
-                  value={helperHost}
-                  onChange={({ target }) =>
-                    setHelperHost((target as HTMLInputElement).value)
-                  }
-                />
-                <Input
-                  type="number"
-                  required={protocol === 'https:'}
-                  invalid={!!hasError}
-                  label="Helper Port"
-                  placeholder="8443"
-                  value={helperPort}
-                  onChange={({ target }) =>
-                    setHelperPort((target as HTMLInputElement).value)
-                  }
-                />
-              </React.Fragment>
-            )}
+          <div>
+            <Checkbox
+              disabled={protocol === 'https:'}
+              checked={useTls}
+              onChange={() => setUseTls((prev) => !prev)}>
+              HTTPS（请确保开启 <code>http-api-tls</code>）
+            </Checkbox>
           </div>
+
           <div tw="mt-6">
             <LoadingButton
               type="submit"
diff --git a/src/types.ts b/src/types.ts
@@ -135,8 +135,7 @@ export interface Profile {
   platform: 'macos' | 'ios'
   platformVersion: string
   platformBuild: number
-  helperHost?: string
-  helperPort?: number
+  tls?: boolean
 }
 
 export interface EvaluateResult {
diff --git a/src/utils/fetcher.ts b/src/utils/fetcher.ts
@@ -1,6 +1,5 @@
-import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
+import axios, { AxiosRequestConfig } from 'axios'
 import { toast } from 'react-toastify'
-import set from 'lodash-es/set'
 
 const client = axios.create({
   baseURL: '/v1',
@@ -24,21 +23,15 @@ export function setServer(
   port: number,
   key: string,
   options?: {
-    helperHost: string
-    helperPort: number
+    tls?: boolean
   },
 ): void {
-  const { protocol } = window.location
-  client.defaults.headers['X-Key'] = key
+  const useTls = options?.tls === true
+
+  client.defaults.headers['x-key'] = key
   client.defaults.timeout = 5000
 
-  if (options) {
-    client.defaults.baseURL = `https://${options.helperHost}:${options.helperPort}/v1`
-    client.defaults.headers['x-surge-host'] = host
-    client.defaults.headers['x-surge-port'] = port
-  } else {
-    client.defaults.baseURL = `${protocol}//${host}:${port}/v1`
-  }
+  client.defaults.baseURL = `${useTls ? 'https:' : 'http:'}//${host}:${port}/v1`
 }
 
 const fetcher = <T>(requestConfig: AxiosRequestConfig): Promise<T> => {
@@ -70,26 +63,4 @@ const fetcher = <T>(requestConfig: AxiosRequestConfig): Promise<T> => {
     })
 }
 
-export const bareFetcher = <T>(
-  requestConfig: AxiosRequestConfig & { url: string },
-  options?: {
-    helperHost: string
-    helperPort: number
-  },
-): Promise<AxiosResponse<T>> => {
-  if (options) {
-    const url = new URL(requestConfig.url)
-    set(requestConfig, 'headers["x-surge-host"]', url.hostname)
-    set(requestConfig, 'headers["x-surge-port"]', url.port)
-
-    url.hostname = options.helperHost
-    url.port = `${options.helperPort}`
-    url.protocol = 'https:'
-
-    requestConfig.url = url.toString()
-  }
-
-  return axios.request<T>(requestConfig)
-}
-
 export default fetcher

Original file line number	Diff line number	Diff line change
`@@ -135,8 +135,7 @@ export interface Profile {`
`135`	`135`	`platform: 'macos' \| 'ios'`
`136`	`136`	`platformVersion: string`
`137`	`137`	`platformBuild: number`
`138`		`- helperHost?: string`
`139`		`- helperPort?: number`
	`138`	`+ tls?: boolean`
`140`	`139`	`}`
`141`	`140`
`142`	`141`	`export interface EvaluateResult {`