Browse Source

feat: 添加后端代理兜底抓取 HTML 的方法

新增 proxyHtml 接口用于后端代理抓取 type=73 类型的 H5 页面,替换原有的 getHtmlPureJS 兜底方案,由后端代抓 S3 上的 HTML 原文,提升平板等低版本内核设备的兼容性。同时注释了原有的调试提示信息,优化错误处理流程。
lsc 4 days ago
parent
commit
3b488aa3e6

+ 11 - 0
src/services/course.ts

@@ -87,6 +87,16 @@ export const getHTML = (url: string, showError: boolean = false): Promise<any> =
   return axios.get(`${url}`, { showError })
 }
 
+/**
+ * 后端代理抓取 HTML(type=73 低版本内核/平板兜底)
+ * 平板与自家后端通信稳定,由后端代抓 S3 上的 H5 页面返回 HTML 原文
+ * @param url 目标URL
+ * @returns Promise<any>
+ */
+export const proxyHtml = (url: string, showError: boolean = false): Promise<any> => {
+  return axios.get(`${API_URL}proxyHtml?url=${encodeURIComponent(url)}`, { showError })
+}
+
 /**
  * 开启/关闭课程跟随模式
  * @param sopen 1否 2是
@@ -262,6 +272,7 @@ export default {
   selectSWorks,
   selectWorksStudent,
   getHTML,
+  proxyHtml,
   updateCourseFollow,
   updateCourseFollowC,
   selectCourseSLook,

+ 8 - 7
src/views/components/element/FrameElement/BaseFrameElement.vue

@@ -132,7 +132,7 @@ import message from '@/utils/message'
 
 const slidesStore = useSlidesStore()
 const manager = useVideoManager()
-const { getFile, getFile2, getHtmlPureJS } = useImport()
+const { getFile, getFile2 } = useImport()
 
 const props = defineProps({
   elementInfo: {
@@ -356,30 +356,31 @@ const handleIframeLoad = async (event: Event) => {
         slidesStore.updateElement({ id: info.id, props: { isDone: true } })
       }
       else {
-        message.info('type=73 跨域,尝试抓取 HTML 做 srcdoc')
+        // message.info('type=73 跨域,尝试抓取 HTML 做 srcdoc')
         console.log('type=73 跨域,尝试抓取 HTML 做 srcdoc')
         let html: string | null = null
         try {
           html = await api.getHTML(info.url)
         }
         catch (_e) {
-          message.info('getHTML 失败,尝试 getFile' + _e)
+          // message.info('getHTML 失败,尝试 getFile' + _e)
           try {
             const fd = await getFile(info.url)
             if (fd?.data) html = new TextDecoder('utf-8').decode(new Uint8Array(fd.data))
           }
           catch (_e2) {
-            message.info('getFile 失败,尝试 getFile2' + _e2)
+            // message.info('getFile 失败,尝试 getFile2' + _e2)
             try {
               const fd2 = await getFile2(info.url)
               if (fd2?.data) html = new TextDecoder('utf-8').decode(new Uint8Array(fd2.data))
             }
             catch (e3) {
-              message.info('getFile2 失败,尝试 getHtmlPureJS' + e3)
-              // 最后兜底:纯 JS + CORS 代理抓取
+              // message.info('getFile2 失败,尝试后端 proxyHtml' + e3)
+              // 最后兜底:自家后端代理代抓(放最后防止服务器过载)
               // 不用在这里注入 <base>:processedSrcDoc 会根据 curl 统一注入
               try {
-                html = await getHtmlPureJS(info.url)
+                const ph = await api.proxyHtml(info.url)
+                if (ph) html = ph
               }
               catch (error) {
                 message.warning('type=73 抓取全部失败:' + error)