axios CDN引入实战jsDelivr与unpkg一行搞定浏览器直用【免费下载链接】axiosPromise based HTTP client for the browser and node.js项目地址: https://gitcode.com/GitHub_Trending/ax/axios场景纯静态页想发请求不想上构建工具刚建了一个纯 HTML 的静态页想发个 HTTP 请求但不想为此装 Node、配 Webpack 那一套。把 axios 通过 CDN 引入就行一条script标签直接跑起来。jsDelivr 和 unpkg 两条路下面都走一遍代码全部可直接复制。一分钟搞懂CDN引入 axios 到底省了哪一步axios 是一个基于 Promise 的 HTTP 客户端浏览器和 Node 都能用GET、POST、拦截器这些常用能力都有常规用法是npm install axios再经构建工具打包CDN引入就是跳过这一步原理两个 CDN 都按 npm 包分发路径同为dist/axios.min.js加载后挂在window.axios本仓库当前主线版本是 1.19.0后文示例统一锁这个版本动手实操两条路径走一遍jsDelivr一行引入国内访问快不少基础引入最新稳定版script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script锁版本写法——别用 latest线上项目锁死版本号script srchttps://cdn.jsdelivr.net/npm/axios1.19.0/dist/axios.min.js/script最小可运行完整示例含 GET、POST 和错误处理保存为index.html双击浏览器打开即可!doctype html html langzh-CN head meta charsetutf-8 titleaxios CDN引入示例/title /head body h1GET 结果/h1 pre idget-result加载中…/pre h1POST 结果/h1 pre idpost-result加载中…/pre !-- jsDelivr 引入锁定版本 1.19.0 -- script srchttps://cdn.jsdelivr.net/npm/axios1.19.0/dist/axios.min.js/script script // GET取一条用户数据 axios.get(https://jsonplaceholder.typicode.com/users/1) .then(function (res) { document.getElementById(get-result).textContent JSON.stringify(res.data, null, 2); }) .catch(function (err) { // 网络错误、超时都会走这里 document.getElementById(get-result).textContent GET 失败 err.message; }); // POST提交一条 JSON axios.post(https://jsonplaceholder.typicode.com/posts, { title: CDN示例, body: 通过 jsDelivr 引入的 axios 发出的 POST }) .then(function (res) { document.getElementById(post-result).textContent POST 成功服务器回显\n JSON.stringify(res.data, null, 2); }) .catch(function (err) { document.getElementById(post-result).textContent POST 失败 err.message; }); /script /body /htmlunpkg一行引入写法略有不同基础引入script srchttps://unpkg.com/axios/dist/axios.min.js/script锁版本写法script srchttps://unpkg.com/axios1.19.0/dist/axios.min.js/script完整示例换成 unpkg页面改成按钮触发 POST结构上换一种写法让你对比!doctype html html langzh-CN head meta charsetutf-8 titleaxios unpkg 引入示例/title /head body h1GET 结果/h1 pre idget-result加载中…/pre button idsend发送 POST/button h1POST 结果/h1 pre idpost-result等待点击…/pre !-- unpkg 引入锁定版本 1.19.0 -- script srchttps://unpkg.com/axios1.19.0/dist/axios.min.js/script script // 页面加载时先发一个 GET axios.get(https://jsonplaceholder.typicode.com/users/1) .then(function (res) { document.getElementById(get-result).textContent JSON.stringify(res.data, null, 2); }) .catch(function (err) { document.getElementById(get-result).textContent GET 失败 err.message; }); // 点击按钮才发 POST document.getElementById(send).onclick function () { axios.post(https://jsonplaceholder.typicode.com/posts, { title: unpkg 测试 }) .then(function (res) { document.getElementById(post-result).textContent POST 成功 JSON.stringify(res.data, null, 2); }) .catch(function (err) { document.getElementById(post-result).textContent POST 失败 err.message; }); }; /script /body /html两个页面都能直接跑通先跑通再优化。方案横向对比对比维度jsDelivrunpkg全球节点数100Cloudflare 网络支撑约 20 个国内访问速度较快国内访问稳定不少一般高峰期偶有波动版本控制支持精确版本号、semver 范围支持精确版本号缓存策略版本号 URL 长期缓存命中率高按资源路径缓存锁版本后同样稳定SRI/子资源完整性官方页面可直接给出 integrity 值需自行计算哈希选型建议一句话面向国内用户优先选 jsDelivr纯海外项目两者皆可但无论选哪个都要锁版本。版本管理与安全加固为什么必须锁版本不锁版本时上游发新版可能引入破坏性变更你的页面某天突然挂掉。!-- 推荐锁定到具体版本行为可预期 -- script srchttps://cdn.jsdelivr.net/npm/axios1.19.0/dist/axios.min.js/script !-- 不推荐始终拉最新出问题查不到根因 -- script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptSRI 子资源完整性怎么用SRI 让浏览器校验脚本内容哈希防止 CDN 被投毒后下发的文件被篡改。!-- integrity 值 对 axios.min.js 文件内容算 sha256 后的 base64 -- script srchttps://cdn.jsdelivr.net/npm/axios1.19.0/dist/axios.min.js integritysha256-这里替换为对应版本的真实哈希 crossoriginanonymous/script哈希获取下载该版本文件后本地算一下即可——openssl dgst -sha256 -binary axios.min.js | openssl base64 -A备用 CDN 兜底写法主 CDN 挂了不至于白屏加载失败就切 unpkg 再试一次script srchttps://cdn.jsdelivr.net/npm/axios1.19.0/dist/axios.min.js/script script // 主源没加载上 window.axios就同步补一个备用源 if (!window.axios) { document.write(script srchttps://unpkg.com/axios1.19.0/dist/axios.min.js\/script); } /script踩坑清单跨域、加载失败、版本冲突1. 控制台报 CORS 错误现象请求发出后报blocked by CORS policy数据拿不到原因是目标 API 服务器没返回Access-Control-Allow-Origin响应头和 CDN 无关CDN 只负责托管 axios 库本身解法让接口服务端加头Node 侧最小改动res.setHeader(Access-Control-Allow-Origin, *);2. 页面报 axios is not defined现象window.axios是 undefined脚本 404原因版本号写错不存在的版本直接 404或路径少写了dist/解法核对版本并按上文备用 CDN 兜底加一层!window.axios检查3. 全局变量被多库污染现象页面同时挂了两个库axios 行为诡异原因某个依赖库内部也引入了旧版 axios互相覆盖全局变量解法全项目统一锁一个版本重复依赖只保留一份4. GET 数据总是旧的现象后端改了数据前端刷新还是老数据原因浏览器对 GET 响应做了缓存解法请求参数里加时间戳强制绕过axios.get(/api/list, { params: { t: Date.now() } });⚠️ 四条里第 1 条最高频CDN 引入本身不会制造跨域跨域永远找接口方解决。进阶拦截器与自定义配置CDN 环境拿到的是全局axios拦截器、自定义实例这些进阶能力照样可用。下面这段演示请求自动带 token 响应统一处理 401直接复制就能用script srchttps://cdn.jsdelivr.net/npm/axios1.19.0/dist/axios.min.js/script script // 建一个带 baseURL 的自定义实例后续请求不用写全地址 const api axios.create({ baseURL: https://api.example.com }); // 请求拦截器自动附加 Authorization 头 api.interceptors.request.use(function (config) { config.headers.Authorization Bearer (localStorage.getItem(token) || ); return config; }); // 响应拦截器401 统一跳登录其他错误继续抛 api.interceptors.response.use( function (res) { return res; }, function (err) { if (err.response err.response.status 401) { location.href /login.html; } return Promise.reject(err); } ); // 业务代码只管发请求 api.get(/me) .then(function (res) { console.log(当前用户, res.data); }) .catch(function (err) { console.error(请求失败, err.message); }); /script要点用axios.create()隔离配置业务方代码更干净拦截器只写一次全站生效。30秒回顾一行引入script srchttps://cdn.jsdelivr.net/npm/axios1.19.0/dist/axios.min.js加载即用window.axiosunpkg 等价写法https://unpkg.com/axios1.19.0/dist/axios.min.js面向国内优先选 jsDelivr别用 latest锁版本 SRI 校验 备用 CDN 兜底三步把生产环境稳下来CORS 报错找接口方加响应头GET 数据旧就加时间戳参数绕缓存【免费下载链接】axiosPromise based HTTP client for the browser and node.js项目地址: https://gitcode.com/GitHub_Trending/ax/axios创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考