axios CDN 引入：2 个 CDN 怎么选、3 步接好、上线前再补 3 处
【免费下载链接】axiosPromise based HTTP client for the browser and node.js项目地址: https://gitcode.com/GitHub_Trending/ax/axios
你的页面没有构建工具、不想装依赖，又想立刻在本地 HTML 里调通一个接口，最直接的方案就是用 CDN 的 script 标签引入 axios。直接给结论：默认选 jsDelivr，国内访问速度和缓存策略更稳；两种情况选 unpkg：需要直接在浏览器里翻 npm 包的目录结构，或者 jsDelivr 限流（429）不可用。axios 当前版本是 1.19.0，URL 里写死这个版本号。
🧭 先看对比：两个 CDN 差在哪
两者取的是同一个 npm 包，文件内容完全一致，差别只在"谁来分发、限流松不松"。
| 对比项 | jsDelivr | unpkg |
|---|---|---|
| 国内访问速度 | 快，边缘节点贴近国内 | 偏慢，节点主要在海外 |
| 指定版本 | 支持axios@1.19.0写法 | 支持axios@1.19.0写法 |
| 限流策略 | 较严，高频请求会返回 429 | 相对宽松 |
| 附加能力 | 官网可直接生成带 integrity 的 script 标签 | 路径即包结构，适合在线翻源码 |
一句话：只是要"引入能用"，jsDelivr 排第一；unpkg 当备胎和文件预览工具。
📦 三步接入：把第一个 GET 请求跑起来
第 1 步：script 标签 + 版本号写法
<script src="https://cdn.jsdelivr.net/npm/axios@1.19.0/dist/axios.min.js"></script>版本号写在包名后面，axios@1.19.0。dist/axios.min.js这个路径是 package.json 里jsdelivr字段明确声明的浏览器构建入口，unpkg字段指向同一路径，不用自己翻目录结构。
第 2 步：发一个 GET 请求
axios.get('/api/time') .then(res => { document.getElementById('status').textContent = '服务器时间：' + res.data; }) .catch(err => { document.getElementById('status').textContent = '请求失败：' + err.message; });res.data就是已经解析过的响应体，渲染时按你接口的实际字段取就行。
第 3 步：确认加载成功
在控制台敲typeof axios，应打印object（UMD 构建挂在 window 上）；打印undefined说明 script 标签没加载成功，多数是版本号写错导致 404。
🔒 生产环境加固：3 处避坑项
锁版本号：别让"最新版"悄悄进来
URL 不写版本时，浏览器拿到的永远是"当时最新"，上游发新版你的页面行为就可能跟着变。把具体版本号写死在 URL 里，升级时主动改，改动才可控。
SRI 怎么加：防文件在传输中被替换
<script src="https://cdn.jsdelivr.net/npm/axios@1.19.0/dist/axios.min.js" integrity="sha256-替换为你计算的哈希" crossorigin="anonymous"></script>哈希是对该版本文件内容做的摘要，可用openssl dgst -sha256 -binary生成后做 base64 编码；jsDelivr 官网也能直接给你拼好的标签。浏览器校验不过会拒绝执行脚本。注意：换版本必须重新算哈希，否则页面直接白屏。
加载失败如何兜底：接备用 CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.19.0/dist/axios.min.js"></script> <script> if (typeof axios === 'undefined') { document.write('<script src="https://unpkg.com/axios@1.19.0/dist/axios.min.js"><\/script>'); } </script>两边写同一版本号。主 CDN 不通时 unpkg 顶上，页面不用刷新。
❓ 三个高频疑问速答
从 CDN 引入会有跨域问题吗
axios 自己的 script 标签不涉及 CORS。常说的"跨域"是你页面发出的 API 请求被拦，那是服务端 CORS 配置问题，跟你从哪个 CDN 引入 axios 无关。
版本冲突怎么处理
UMD 构建只占一个全局window.axios。别在同一个页面里引两个版本的 axios；如果另一段第三方脚本也抢这个全局名，把它换成模块化引入或做作用域隔离。
请求明明发出了但页面没反应，怎么查
按顺序看三样：typeof axios是不是 object、Network 面板里请求状态码是 200 还是 4xx/5xx、res.data的结构是不是你以为的字段。静默失败基本落在这三处之一。
动手就两句话
有构建工具的项目用 npm 装 axios，交给打包器处理；演示页、内网工具、接口联调这种场景，锁住版本号、接上 jsDelivr、补完 SRI 再上线，剩下的交给 unpkg 兜底。
参考资料：
- axios 官方文档（仓库内 docs/ 目录）
- jsDelivr 官网
- unpkg 官网
【免费下载链接】axiosPromise based HTTP client for the browser and node.js项目地址: https://gitcode.com/GitHub_Trending/ax/axios
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
