feat(util): 统一请求地址,处理内外网代理问题

src/utils/http/axios/index.ts

@@ -19,6 +19,8 @@ import { joinTimestamp, formatRequestDate } from './helper'
 import { useUserStoreWithOut } from '/@/store/modules/user'
 import { AxiosRetry } from '/@/utils/http/axios/axiosRetry'
 import * as HTTP from '/@/api/types'
+import { API_URL, API_URL_PREFIX } from '/@/utils/net'
+import { handleResponseResource } from '/@/utils/proxy'
 
 const GLOBAL_API_ERROR_MESSAGE_KEY = 'GLOBAL_MESSAGE_KEY'
 const globSetting = useGlobSetting()
@@ -57,7 +59,7 @@ const transform: AxiosTransform = {
         // 这里逻辑可以根据项目进行修改
         const hasSuccess = data && Reflect.has(data, 'status') && status === HTTP.Status.OK
         if (hasSuccess) {
-            return body
+            return handleResponseResource(body, options)
         }
 
         // 在此处根据自己项目的实际情况对不同的code执行不同的操作
@@ -256,26 +258,11 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
     )
 }
 
-// =============================================================================
-// 生产环境
-// const host = 'https://beta.app.yiring.com'
-// let apiUrl = `${host}`
-
-// 开发环境
-const host = globSetting.apiUrl
-let apiUrl = `${host}`
-
-// 检查生产环境，使用对应 env 中的配置，保留原有方式方便开发中调试
-apiUrl = import.meta.env.MODE !== 'development' ? globSetting.apiUrl : apiUrl
-// 如果使用代理访问网站，则默认使用代理 API 地址
-// apiUrl = isProxy(window.location.host) ? `http://proxy.yiring.com` : apiUrl
-export { apiUrl }
-// =============================================================================
-
 // TODO: 实际项目所需的请求配置，可自定义扩展
 export const defHttp = createAxios({
     requestOptions: {
-        apiUrl,
+        apiUrl: API_URL,
+        urlPrefix: API_URL_PREFIX,
     },
 })
 

src/utils/net.ts

+import { useGlobSetting } from '/@/hooks/setting'
+
+let HOST = 'localhost'
+let API_URL = `${HOST}`
+const globSetting = useGlobSetting()
+const API_URL_PREFIX = globSetting.urlPrefix
+
+// =============================================================================
+// ✨ 生产环境
+// HOST = 'https://beta.app.yiring.com'
+// API_URL = `${HOST}`
+
+// 📖 开发环境
+HOST = globSetting.apiUrl
+API_URL = `${HOST}`
+
+// 🔦 检查生产环境，使用对应 env 中的配置，保留原有方式方便开发中调试
+API_URL = import.meta.env.MODE !== 'development' ? globSetting.apiUrl : API_URL
+
+// 📢 如果使用代理访问网站，则默认使用代理 API 地址
+// API_URL = isProxy(window.location.host) ? `http://proxy.yiring.com` : API_URL
+// =============================================================================
+
+export {
+    /**
+     * API URL
+     * eg: https://beta.app.yiring.com
+     */
+    API_URL,
+    /**
+     * API URL Prefix
+     * eg: /api
+     */
+    API_URL_PREFIX,
+}

src/utils/proxy.ts

+/**
+ * FIXD: 固定说明，此文件内不允许使用 import.env 之类的环境变量，否则会导致地图模块异常
+ */
+
+const PROXY_LIST = [
+    // eg: 开发环境
+    // ['http://192.168.1.100:18100', `http://proxy.yiring.com:41180`],
+    // eg: 测试环境
+    // ['http://10.111.117.15:18100', `http://proxy.yiring.com:42180`],
+    // eg: 生产环境
+    // ['http://192.168.0.100:18100', `https://oss.app.yiring.com`],
+]
+
+/**
+ * 将内部地址（内网）转换成代理/预览地址（公网）
+ * @param url 内网地址
+ */
+export const getExtranetUrl = (url: string): string => {
+    let uri = url
+
+    PROXY_LIST.forEach((proxy) => {
+        uri = uri.replace(new RegExp(proxy[0], 'gi'), proxy[1])
+    })
+
+    return uri
+}
+
+/**
+ * 将代理/预览地址（公网）转换成内部地址（内网）
+ * eg: 主要用于解决内网文件上传后预览，但是实际上传存储时还是内网地址的问题
+ * @param url 代理/公网地址
+ */
+export const getIntranetUrl = (url: string): string => {
+    let uri = url
+
+    PROXY_LIST.forEach((proxy) => {
+        uri = uri.replace(new RegExp(proxy[1], 'gi'), proxy[0])
+    })
+
+    return uri
+}
+
+/**
+ * 替换处理返回的数据中本地链接
+ * @param body 接口返回的内容
+ * @returns 替换本地链接后的数据结果
+ */
+export const handleResponseResource = <T>(body: T, options: Recordable) => {
+    if (options.apiUrl.includes('proxy.yiring.com') && typeof body === 'object') {
+        let text = JSON.stringify(body)
+
+        // 处理内网地址的预览问题
+        text = getExtranetUrl(text)
+
+        return JSON.parse(text) as T
+    }
+
+    return body
+}