2025场景面试题跟练(五)1. babel-runtime作用是啥？ babel-runtime 是 Babel 的一

1. babel-runtime作用是啥？

babel-runtime 是 Babel 的一个库，主要作用是提供运行时所需的帮助函数（helper functions）和 polyfills，以便在转译后的 JavaScript 代码中支持现代 JavaScript 特性（例如 ES6+）。

具体作用包括：

提供帮助函数：Babel 在转译代码时，会将现代 JavaScript 语法（如箭头函数、类等）转换为兼容旧环境的代码。这些转换可能需要一些辅助函数（比如处理 class 的继承或 async/await 的实现）。babel-runtime 包含这些函数，避免在每个文件重复生成，减少代码体积。
Polyfills：对于需要运行时支持的特性（如 Promise、Symbol 或其他 ES6+ API），babel-runtime 可以与 @babel/polyfill 或 core-js 配合，确保这些特性在不支持的环境（如旧浏览器）中正常工作。
模块化支持：babel-runtime 允许开发者以模块化的方式引入所需的 helper 函数或 polyfills，而不是全局注入，从而避免污染全局命名空间。

1.1. 使用场景

通常用于库或模块开发，确保代码在不同环境中运行，且不会重复包含相同的帮助函数。
配合 @babel/plugin-transform-runtime 插件使用，自动分析代码并按需引入 babel-runtime 中的函数。

1.2. 注意事项

babel-runtime 本身不包含完整的 polyfills（如 core-js 提供的全局 API 填充），如果需要完整的 ES6+ 特性支持，可能需要额外引入 @babel/polyfill 或 core-js。
使用时需安装 babel-runtime 作为依赖，并在 Babel 配置中启用相关插件。

总结：babel-runtime 主要用于优化转译代码，提供运行时所需的帮助函数和部分 polyfills，减少冗余代码并提升兼容性。

2. 如何实现预览PDF文件？

2.1.1. 使用 PDF.js（推荐）

PDF.js 是由 Mozilla 开发的一个开源 JavaScript 库，专门用于在浏览器中渲染 PDF 文件，支持自定义和跨浏览器兼容。

步骤：

引入 PDF.js：

- 通过 CDN 引入：<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
- 或下载 PDF.js 到本地项目（从官方 GitHub 获取）。

HTML 结构：

<div>
<canvasid="pdfCanvas"></canvas>
</div>

JavaScript 代码：

// 设置 PDF.js worker
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';

// 加载并渲染 PDF
const url = '/path/to/your/file.pdf'; // PDF 文件路径
const loadingTask = pdfjsLib.getDocument(url);

loadingTask.promise.then(pdf => {
// 获取第一页
 pdf.getPage(1).then(page => {
const scale = 1.5; // 缩放比例
const viewport = page.getViewport({ scale });

// 设置 canvas
const canvas = document.getElementById('pdfCanvas');
const context = canvas.getContext('2d');
 canvas.height = viewport.height;
canvas.width = viewport.width;

// 渲染页面
const renderContext = {
canvasContext: context,
viewport: viewport
 };
page.render(renderContext);
});
}).catch(error => {
console.error('PDF 加载失败:', error);
});

多页支持（可选）：如果需要显示多页，可以循环 pdf.numPages 并为每页创建一个，或使用 PDF.js 提供的 viewer.html（官方预览界面）

2.1. 优点：

跨浏览器兼容性好，支持移动端。
可自定义功能（如缩放、翻页、搜索等）。
不依赖浏览器内置 PDF 查看器。

2.2. 缺点：

配置稍复杂，需额外引入库。
对于大型 PDF 文件，性能可能需要优化。

3. 如何在划词选择的文本上添加右键菜单

3.1. 实现步骤

监听划词选择：通过 mouseup 事件或 selectionchange 事件检测用户是否选择了文本。
获取选中文本：使用 window.getSelection() 获取用户选择的文本内容和位置。
创建右键菜单：动态生成一个自定义的上下文菜单（通常是一个 <div>），并定位到鼠标点击位置。
绑定右键事件：通过 contextmenu 事件拦截默认右键菜单，显示自定义菜单。
处理菜单交互：为菜单项添加点击事件，实现具体功能（如复制、搜索等）。
隐藏菜单：在点击其他地方或执行菜单操作后隐藏菜单。

3.2. 示例代码

以下是一个完整的纯 JavaScript 实现，支持在划词时显示自定义右键菜单：

<!DOCTYPE html>
<html>
<head>
    <title>自定义右键菜单</title>
    <style>
        /* 自定义右键菜单样式 */
        #customContextMenu {
            position: absolute;
            background: #fff;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            padding: 5px 0;
        }
        #customContextMenu div {
            padding: 8px 15px;
            cursor: pointer;
        }
        #customContextMenu div:hover {
            background: #f0f0f0;
        }
    </style>
</head>
<body>
    <p>请选中这段文字，然后右键查看自定义菜单！</p>
    <p>这是一些示例文本，用于测试划词右键菜单功能。</p>
    <script>
        // 创建右键菜单
        function createContextMenu() {
            const menu = document.createElement('div');
            menu.id = 'customContextMenu';
            menu.style.display = 'none';
            menu.innerHTML = `
                <div onclick="handleMenuAction('copy')">复制</div>
                <div onclick="handleMenuAction('search')">搜索</div>
                <div onclick="handleMenuAction('note')">添加笔记</div>
            `;
            document.body.appendChild(menu);
            return menu;
        }

        // 初始化菜单
        const contextMenu = createContextMenu();

        // 获取选中文本
        function getSelectedText() {
            return window.getSelection().toString().trim();
        }

        // 显示右键菜单
        function showContextMenu(event) {
            const selectedText = getSelectedText();
            if (selectedText) { // 仅在有选中文本时显示
                event.preventDefault(); // 阻止默认右键菜单
                contextMenu.style.display = 'block';
                contextMenu.style.left = `${event.pageX}px`;
                contextMenu.style.top = `${event.pageY}px`;
            } else {
                contextMenu.style.display = 'none'; // 无选中文本时隐藏
            }
        }

        // 隐藏右键菜单
        function hideContextMenu() {
            contextMenu.style.display = 'none';
        }

        // 处理菜单项点击
        function handleMenuAction(action) {
            const selectedText = getSelectedText();
            switch (action) {
                case 'copy':
                    navigator.clipboard.writeText(selectedText)
                        .then(() => alert('已复制: ' + selectedText))
                        .catch(err => console.error('复制失败:', err));
                    break;
                case 'search':
                    window.open(`https://www.google.com/search?q=${encodeURIComponent(selectedText)}`, '_blank');
                    break;
                case 'note':
                    alert('添加笔记: ' + selectedText);
                    // 这里可以实现添加笔记的逻辑
                    break;
                default:
                    console.log('未知操作');
            }
            hideContextMenu(); // 操作后隐藏菜单
        }

        // 绑定右键事件
        document.addEventListener('contextmenu', showContextMenu);

        // 点击其他地方隐藏菜单
        document.addEventListener('click', hideContextMenu);

        // 监听选择变化（可选，优化体验）
        document.addEventListener('selectionchange', () => {
            if (!getSelectedText()) {
                hideContextMenu();
            }
        });
    </script>
</body>
</html>

3.3. 代码说明

样式：

- #customContextMenu 使用绝对定位（position: absolute），通过 left 和 top 动态设置菜单位置。
- 添加阴影和 hover 效果，提升用户体验。

事件监听：

- contextmenu 事件捕获右键点击，检查是否有选中文本。
- click 事件用于点击页面其他区域时隐藏菜单。
- selectionchange 事件确保无选中文本时菜单不会显示。

功能实现：

- copy：使用 navigator.clipboard API 复制选中文本。
- search：打开 Google 搜索选中文本。
- note：模拟添加笔记功能（可扩展为实际逻辑）。

动态菜单：

- 菜单通过 createContextMenu 函数创建，内容可灵活定制。
- 菜单项的点击事件通过 onclick 绑定到 handleMenuAction。

3.4. 适配框架

如果使用 React、Vue 等框架，可以将上述逻辑封装为组件：

3.4.1. React 示例

import { useEffect, useRef } from 'react';
import './ContextMenu.css';

const ContextMenu = () => {
    const menuRef = useRef(null);

    const showContextMenu = (event) => {
        const selectedText = window.getSelection().toString().trim();
        if (selectedText) {
            event.preventDefault();
            menuRef.current.style.display = 'block';
            menuRef.current.style.left = `${event.pageX}px`;
            menuRef.current.style.top = `${event.pageY}px`;
        } else {
            menuRef.current.style.display = 'none';
        }
    };

    const hideContextMenu = () => {
        if (menuRef.current) {
            menuRef.current.style.display = 'none';
        }
    };

    const handleMenuAction = (action) => {
        const selectedText = window.getSelection().toString().trim();
        if (action === 'copy') {
            navigator.clipboard.writeText(selectedText);
            alert('已复制');
        } else if (action === 'search') {
            window.open(`https://www.google.com/search?q=${encodeURIComponent(selectedText)}`, '_blank');
        }
        hideContextMenu();
    };

    useEffect(() => {
        document.addEventListener('contextmenu', showContextMenu);
        document.addEventListener('click', hideContextMenu);
        return () => {
            document.removeEventListener('contextmenu', showContextMenu);
            document.removeEventListener('click', hideContextMenu);
        };
    }, []);

    return (
        <div ref={menuRef} className="context-menu" style={{ display: 'none' }}>
            <div onClick={() => handleMenuAction('copy')}>复制</div>
            <div onClick={() => handleMenuAction('search')}>搜索</div>
        </div>
    );
};

export default ContextMenu;

CSS (ContextMenu.css) 与前述类似。

3.5. 注意事项

浏览器兼容性：

- window.getSelection() 和 navigator.clipboard 在现代浏览器中广泛支持。
- 老旧浏览器可能需要 polyfill 或降级处理。

性能优化：

- 避免频繁操作 DOM，缓存菜单元素。
- 对大型页面，限制监听范围（如特定容器）。

安全性：

- 如果涉及敏感操作（如复制到剪贴板），提示用户。
- 确保搜索 URL 编码正确，防止注入攻击。

移动端适配：

- 移动端无右键，可改用长按事件（touchstart 和 touchend）。
- 使用 contextmenu 事件需测试兼容性。

框架注意：

- 在 React 中，使用 useRef 管理菜单 DOM，避免状态更新导致重渲染。
- 在 Vue 中，可用 ref 和 @contextmenu 指令实现类似逻辑。

3.6. 扩展功能

动态菜单项：根据选中文本内容动态调整菜单（如翻译、分享）。
快捷键支持：为菜单项绑定快捷键（如 Ctrl+C 复制）。
动画效果：添加淡入淡出动画，提升体验。
多语言支持：菜单项支持国际化。

4. 如何做好前端监控方案

4.1. 明确监控目标

性能监控：页面加载速度、资源加载时间、渲染性能。
错误监控：JavaScript 错误、API 请求失败、资源加载失败。
用户体验：用户行为路径、交互延迟、留存率。
业务指标：关键操作转化率（如点击、下单）。
结合业务需求，优先级排序，避免监控冗余。

4.2. 选择监控维度与指标

性能指标：

- FCP（首次内容绘制） 、LCP（最大内容绘制） 、TTI（可交互时间） 。
- CLS（累积布局偏移） ：页面稳定性。
- TBT（总阻塞时间） ：交互响应性。
- DNS解析、TCP连接、首字节时间。

错误指标：

- JS 运行时错误（try-catch、window.onerror）。
- 资源加载错误（img、script 等失败）。
- 接口错误（HTTP 4xx、5xx）。

用户行为：

- 页面停留时间、点击热图、跳转率。
- 用户设备、浏览器、地域分布。

业务指标：

- 自定义事件（如按钮点击、表单提交）。

4.3. 技术实现

4.3.1. 埋点方案

自动埋点：

- 使用工具（如 Sentry、OpenTelemetry）自动收集页面加载、错误等。
- 优点：低开发成本；缺点：可能数据冗余。

手动埋点：

- 针对关键业务逻辑（如支付按钮点击）添加自定义事件。
- 代码示例：

// 手动埋点示例
function trackEvent(eventName, payload) {
  window.dataLayer?.push({ event: eventName, ...payload });
}
trackEvent('button_click', { button_id: 'pay_now' });

无痕埋点：

- 通过可视化工具配置埋点，适合快速迭代项目。

4.3.2. 错误捕获

全局错误监听：

window.onerror = (msg, url, line, col, error) => {
  console.log('Error:', { msg, url, line, col, error });
  // 上报到服务器
  fetch('/log', { method: 'POST', body: JSON.stringify({ type: 'error', msg, url, line, col }) });
};

未捕获的 Promise 错误：

window.addEventListener('unhandledrejection', (event) => {
  console.log('Promise Error:', event.reason);
  // 上报
});

资源加载错误：

window.addEventListener('error', (event) => {
  if (event.target.tagName) {
    console.log('Resource Error:', event.target.src);
    // 上报
  }
}, true);

4.3.3. 性能监控

使用 Performance API 收集关键指标：

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('LCP:', entry.startTime);
    // 上报
  }
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });

结合 Web Vitals 库：

import { getLCP, getCLS, getFID } from 'web-vitals';
getLCP(console.log);
getCLS(console.log);
getFID(console.log);

4.3.4. 用户行为追踪

使用工具（如 Hotjar、Clarity）生成热图、会话录制。
自定义事件追踪：

document.querySelector('#submit').addEventListener('click', () => {
  trackEvent('form_submit', { form_id: 'signup' });
});

4.4.选择监控工具

开源工具：

- Sentry：错误监控、性能追踪。
- Grafana Tempo：分布式追踪。
- OpenTelemetry：标准化监控数据收集。

商业工具：

- Datadog：全栈监控。
- New Relic：性能与用户体验分析。
- Aliyun ARMS：国内常用，适合中小团队。

自研系统：

- 如果业务复杂，考虑自研监控平台，基于 ELK（Elasticsearch + Logstash + Kibana）存储和分析日志。

4.5. 数据采集与上报

采样率：高流量场景下，设置采样率（如 10%）降低服务器压力。
延迟上报：

let logs = [];
function report() {
  if (logs.length) {
    fetch('/log', { method: 'POST', body: JSON.stringify(logs) });
    logs = [];
  }
}
window.requestIdleCallback(report, { timeout: 1000 });

- 使用 requestIdleCallback 或定时器批量上报，避免影响页面性能。

离线缓存：网络断开时，使用 localStorage 暂存，恢复后上报。

4.6. 数据分析与可视化

实时监控：通过 Dashboard（如 Grafana、Kibana）展示关键指标。
异常告警：

- 配置告警规则（如错误率超 1% 触发通知）。
- 使用工具（如 PagerDuty、钉钉）推送告警。

回溯分析：

- 结合用户 ID、会话 ID，定位问题上下文。
- 示例：Sentry 的 Breadcrumb 功能记录用户操作轨迹。

4.7. 优化与迭代

定期复盘：分析监控数据，找出性能瓶颈或高频错误。
用户反馈：结合用户投诉，验证监控覆盖率。
A/B 测试：监控不同版本的性能和转化率差异。
隐私合规：

- 遵守 GDPR、CCPA 等法规，明确数据收集范围。
- 匿名化敏感信息（如用户 ID 加密）。

4.8. 常见问题与解决方案

数据量过大：设置采样率、压缩日志（如 Gzip）。
性能影响：异步上报、使用 Web Worker 处理日志。
误报频繁：过滤无关错误（如第三方脚本）。
跨域问题：为静态资源配置 CORS 或使用 CDN。

4.9. 推荐实践

最小化侵入：监控代码尽量解耦，避免影响业务逻辑。
模块化设计：将监控分为性能、错误、行为模块，独立维护。
端到端追踪：前后端日志关联（如 Trace ID），便于问题定位。
测试验证：上线前模拟错误、性能场景，确保监控有效。

4.10. 10. 工具组合示例

小型项目：Sentry（错误） + Google Analytics（行为） + Web Vitals（性能）。
中大型项目：OpenTelemetry（采集） + ELK（存储） + Grafana（展示） + 自定义埋点。
高可用系统：Datadog（全栈） + 自研告警 + 热图工具。

5. 如何标准化处理线上用户反馈的问题

标准化处理线上用户反馈问题可以提高效率、确保一致性并提升用户体验。以下是具体步骤和建议：

建立反馈收集机制

- 统一渠道：通过官网、社交媒体（如X）、邮件、App内反馈等集中收集用户反馈。
- 分类标签：为反馈设置类别（如功能建议、bug、投诉等），便于后续处理。
- 自动化工具：使用CRM系统或反馈管理工具（如Zendesk、Freshdesk）自动归档和分配反馈。

制定标准化流程

- 接收与记录：确保每条反馈都被记录，包含时间、用户ID、问题描述等关键信息。
- 初步筛选：快速判断反馈的紧急程度（如严重bug优先于一般建议）。
- 分配任务：根据问题类型分配给相应团队（如技术、客服、产品）。
- 响应时间承诺：设定回复时限（如24小时内初次回应）。

统一回复模板与语气

- 创建模板：针对常见问题准备标准化的回复模板，包含致谢、问题确认和后续跟进说明。
- 保持专业与共情：语气应友好、理解用户情绪，避免机械化语言。
- 个性化调整：在模板基础上，根据具体情况稍作调整，体现对用户的重视。

分析与优化

- 数据统计：定期分析反馈类型、频次及用户满意度，找出共性问题。
- 问题归因：区分是产品bug、用户误解还是其他原因，针对性解决。
- 持续改进：将高频反馈转化为产品或服务优化的输入。

培训与监督

- 团队培训：确保客服和技术团队熟悉标准化流程和工具使用。
- 质量监控：定期抽查回复质量，确保符合标准。

注意事项：

文化差异：如果涉及多语言用户，反馈处理需考虑语言和文化背景。
隐私保护：严格遵守数据隐私法规（如GDPR），保护用户信息。
透明沟通：对无法立即解决的问题，及时告知用户进展。

6. px 如何转为rem

使用postcss插件
使用css预处理器

7. 浏览器有同源策略，但是为何cdn请求资源的时候不会有跨域限制？

浏览器的同源策略（Same-Origin Policy）限制了从一个源加载的脚本对其他源的资源进行访问，以防止恶意行为。然而，CDN（内容分发网络）请求资源时通常不会受到跨域限制，主要原因如下：

CORS（跨源资源共享）机制：

- CDN提供的资源通常通过服务器配置支持CORS（Cross-Origin Resource Sharing）。CDN服务器会在响应头中设置Access-Control-Allow-Origin，允许特定或所有域名访问资源。例如：

Access-Control-Allow-Origin: *

这告诉浏览器，允许来自任何域的请求访问该资源，从而绕过了同源策略的限制。

静态资源的特殊性：

- CDN主要提供静态资源（如图片、CSS、JavaScript文件等），这些资源通常不涉及敏感数据或用户隐私。浏览器对静态资源的跨域请求限制相对宽松，尤其是<script>, <img>, <link>等标签天生支持跨域加载资源。
- 例如，<script src="https://cdn.example.com/script.js"></script>会直接加载并执行，无需额外的跨域检查。

JSONP或无跨域限制的场景：

- 一些CDN提供的JavaScript文件可能通过JSONP（JSON with Padding）方式加载，虽然这是一种较老的技术，但它通过动态创建<script>标签绕过了同源策略。
- 现代CDN更多依赖CORS，但JSONP在某些场景下仍然存在。

CDN的广泛信任与设计：

- CDN的目的是高效分发内容，通常由可信的第三方（如Cloudflare、Akamai）运营。为了方便使用，CDN提供商在服务器端配置了宽松的跨域策略，确保资源可以被任何网站轻松引用。
- 开发者在选择CDN时，通常也会确保其来源可信，避免安全风险。

7.1. 总结

CDN请求资源时不受跨域限制，主要是因为CDN服务器通过CORS头允许跨域访问，静态资源的加载本身在浏览器中限制较少，以及CDN设计上的开放性。如果CDN未配置CORS或资源涉及敏感数据，浏览器仍可能触发跨域限制。

8. cookie 可以实现不同域共享吗？是的，Cookie 可以实现不同域之间的共享，但需要满足特定的条件并采取一些技术手段。以下是详细说明：

8.1. Cookie 的域（Domain）属性

Cookie 的 Domain 属性决定了哪些域名可以访问该 Cookie。默认情况下，Cookie 只会绑定到设置它的具体域名（例如 example.com），但可以通过显式设置 Domain 属性来实现跨子域共享。
跨子域共享：

- 如果将 Cookie 的 Domain 属性设置为 .example.com（注意前面的点），则所有子域（如 sub1.example.com、sub2.example.com）都可以访问该 Cookie。
- 示例：后端在设置 Cookie 时，可以指定 Domain=.example.com，这样 app1.example.com 和 app2.example.com 都能读取到这个 Cookie。

限制：Domain 属性只能设置为当前域的父域或同级域，不能设置为完全无关的域（例如，不能从 example.com 设置 Cookie 的 Domain 为 another.com）。

8.2. 完全不同域的 Cookie 共享

如果是完全不同的域名（例如 example.com 和 another.com），浏览器基于同源策略（Same-Origin Policy）会限制 Cookie 的直接共享。但可以通过以下方法实现间接共享：

8.2.1. 方法 1：使用服务器端代理

原理：通过一个中间服务器（代理）在不同域之间传递 Cookie 数据。
实现方式：

1. 用户访问 example.com，服务器设置一个 Cookie。
2. 当用户访问 another.com 时，another.com 的前端或后端通过请求 example.com 的代理接口（例如 /get-cookie），获取相关的 Cookie 数据。
3. 代理接口需要处理跨域请求（CORS），并确保安全（如验证请求来源）。

缺点：需要额外的服务器支持，且可能增加延迟。

8.2.2. 方法 2：通过 iframe 和 postMessage

原理：利用 HTML5 的 postMessage API，通过嵌入一个隐藏的 iframe 来在不同域之间传递 Cookie 数据。
实现方式：

1. 在 example.com 的页面中嵌入一个来自 another.com 的 iframe。
2. example.com 的页面通过 postMessage 将 Cookie 数据发送给 another.com 的 iframe。
3. another.com 的 iframe 接收数据并存储到自己的 Cookie 中。

注意：需要双方域名配合，且安全性依赖于消息来源的验证。

8.2.3. 方法 3：使用第三方 Cookie（不推荐）

原理：通过一个共同的第三方域名（例如 thirdparty.com）设置 Cookie，example.com 和 another.com 都通过访问该第三方域名来共享 Cookie。
实现方式：

1. example.com 和 another.com 都加载来自 thirdparty.com 的脚本或资源。
2. thirdparty.com 设置一个 Cookie，两个域名都可以访问。

问题：现代浏览器（如 Chrome、Safari）对第三方 Cookie 的支持逐渐减少（例如，ITP 和 SameSite 限制），这种方式可能不可靠。

8.2.4. 方法 4：单点登录（SSO）

原理：通过一个中心化的身份认证服务（如 OAuth、SAML），在不同域之间共享认证状态，而不是直接共享 Cookie。
实现方式：

1. 用户在 auth.example.com 登录，生成一个 token（可以存储在 Cookie 中）。
2. 当用户访问 another.com 时，通过重定向或接口从 auth.example.com 获取认证信息。

优点：安全、可靠，适合企业级应用。

8.3. SameSite 属性对共享的影响

Cookie 的 SameSite 属性（Strict、Lax 或 None）会影响跨域访问：

- SameSite=Strict：仅允许同源请求访问 Cookie，跨域无法共享。
- SameSite=Lax：允许部分跨站请求（例如顶级导航），但限制较多。
- SameSite=None; Secure：允许跨站请求，但要求 HTTPS 连接。

如果需要跨域共享 Cookie，通常需要设置 SameSite=None; Secure，并确保使用 HTTPS。

8.4. 安全性考虑

CSRF 风险：跨域共享 Cookie 可能增加跨站请求伪造（CSRF）的风险，建议使用 CSRF Token 或 SameSite 属性来防御。
XSS 风险：确保 Cookie 的 HttpOnly 属性为 true，防止通过 JavaScript 访问。
数据泄露：共享 Cookie 时需加密敏感数据，避免明文传输。

8.5. 总结

子域共享：通过设置 Domain=.example.com 简单实现。
不同域共享：需要借助代理、iframe、SSO 等方式，第三方 Cookie 已不可靠。
推荐方案：优先使用 SSO 或服务器端代理，兼顾安全性和兼容性。
注意事项：遵守浏览器的隐私政策（如第三方 Cookie 限制）和 SameSite 属性要求。

9. axios 是否可以取消请求？

const controller = new AbortController();

axios.get('/api/data', {
  signal: controller.signal
}).then(response => {
  console.log(response.data);
}).catch(error => {
  if (error.name === 'AbortError') {
    console.log('请求已取消');
  } else {
    console.log('请求失败:', error);
  }
});

// 取消请求
controller.abort();