AJAX、跨域与常用请求库实战指南-北京尧图网络

对比维度GETPOST语义从服务器获取资源向服务器提交数据创建/修改资源数据位置参数拼在 URL 中查询字符串参数放在请求体body中数据长度URL 长度有限制一般 2KB~8KB取决于浏览器理论上无限制适合大文本、文件上传在 AJAX 中的实际表现GET 请求示例原生 XHRvar xhr new XMLHttpRequest(); xhr.open(GET, /api/users?id123nameTom); // 参数拼在 URL xhr.send(); // send() 不带参数xhr.open(method, url, async, user, password);参数拼接在URLPOST 请求示例var xhr new XMLHttpRequest(); xhr.open(POST, /api/users); xhr.setRequestHeader(Content-Type, application/json); // 设置请求体格式 xhr.send(JSON.stringify({ id: 123, name: Tom })); // 数据放在 send() 中xhr.setRequestHeader(key, value);常用请求头Content-Type: 告诉服务器你发送的数据格式如application/x-www-form-urlencoded、application/json、multipart/form-dataAuthorization: 携带 token 进行身份验证跨域问题一、什么是跨域跨域是指浏览器出于安全考虑限制一个网页脚本如 JavaScript访问另一个不同源的资源。同源的定义协议、域名、端口三者完全相同。当前页面 URL目标 URL是否同源原因http://a.com/pagehttp://a.com/api✅ 同源协议、域名、端口一致http://a.comhttps://a.com❌ 不同源协议不同http vs httpshttp://a.comhttp://b.com❌ 不同源域名不同http://a.com:80http://a.com:8080❌ 不同源端口不同二、为什么会有跨域限制浏览器实施同源策略Same-Origin Policy目的是防止恶意网站窃取用户在其他网站的数据如 Cookie、LocalStorage、DOM 等。如果没有此限制攻击者可以在自己的页面中通过脚本读取你在银行网站的登录状态。注意跨域限制是浏览器的行为服务器之间的请求不受此限制。三、常见的跨域场景前后端分离开发前端http://localhost:3000后端http://localhost:8080调用第三方 API如调用百度地图、GitHub API 等加载不同域下的字体、图片、脚本部分资源有特殊规则四、解决跨域的常用方案1️⃣ CORS跨域资源共享—— 最推荐、最标准CORS 是 W3C 标准通过在服务端设置响应头来告诉浏览器“允许这个跨域请求”。关键响应头Access-Control-Allow-Origin允许的源可设为*允许所有或具体域名Access-Control-Allow-Methods允许的 HTTP 方法如GET, POST, PUTAccess-Control-Allow-Headers允许的自定义请求头如Authorization, Content-TypeAccess-Control-Allow-Credentials是否允许携带 Cookie需设为true且 Origin 不能为*Access-Control-Max-Age预检请求的有效期秒简单请求 vs 预检请求简单请求满足条件如 Method 为 GET/POST/HEADContent-Type 为 text/plain、multipart/form-data、application/x-www-form-urlencoded无自定义头→ 直接发请求浏览器自动处理响应头。预检请求不满足简单请求条件时如使用 PUT/DELETE、自定义头、application/json等浏览器先发一个OPTIONS请求询问服务器是否允许服务器返回允许后再发真实请求。后端示例Node.js Expressjavascriptapp.use((req, res, next) { res.header(Access-Control-Allow-Origin, *); res.header(Access-Control-Allow-Headers, Content-Type, Authorization); res.header(Access-Control-Allow-Methods, GET, POST, PUT, DELETE, OPTIONS); if (req.method OPTIONS) { return res.sendStatus(204); } next(); });2️⃣ JSONPJSON with Padding—— 仅支持 GET利用script标签不受同源策略限制的特性通过动态创建 script 标签加载跨域接口并将回调函数名传给服务器服务器返回包裹数据的函数调用。缺点只支持 GET不安全易受 XSS 攻击逐渐被淘汰。示例javascriptfunction handleData(data) { console.log(data); } const script document.createElement(script); script.src http://api.example.com/data?callbackhandleData; document.body.appendChild(script);服务器返回handleData({name: Tom})3️⃣ 代理服务器反向代理通过同源的服务器转发请求到目标服务器从而绕过浏览器跨域限制。常见实现方式开发阶段Vue/React 脚手架中的 devServer proxy如 webpack-dev-server生产环境Nginx 反向代理Nginx 配置示例nginxlocation /api/ { proxy_pass http://backend-server:8080/; add_header Access-Control-Allow-Origin *; }4️⃣ WebSocketWebSocket 协议本身不受同源策略限制可以通过建立长连接进行跨域通信。5️⃣ postMessage iframe通过window.postMessage在不同窗口/iframe 间传递消息适用于跨域页面通信。xrh.responsejson自动转换json数据IE缓存问题Date.now()请求超时与网络异常重复请求发送添加标示量issendingfalseif (issending) x.abort()中止后面重新发送xnew XMLHttpRequest()issendingtrue发送后issendingfalsejQuery发送AJAX请求1. 引入script srchttps://cdn.bootcdn.net/ajax/libs/jquery/4.0.0/jquery.min.js/scriptaxios1️⃣ 安装 / 引入 axios浏览器环境CDNscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script可以引入国内的script crossoriginanonymous srchttps://cdn.bootcdn.net/ajax/libs/axios/1.18.1/axios.js/scriptNode.js 环境npm install axios然后在文件中引入javascriptconst axios require(axios); // 或 ES module: import axios from axios;2️⃣ 发送请求一、别名方法如axios.get/axios.post1 .axios.get(url, config)参数位置类型必需说明url第一个string✅ 是请求地址相对或绝对config第二个object❌ 否配置对象常用属性见下表config 常用属性GET 请求params— 查询参数对象自动拼接到 URL 后headers— 自定义请求头对象timeout— 超时毫秒数responseType— 响应数据类型如json、blobwithCredentials— 是否携带 cookie布尔值示例javascriptaxios.get(/api/users, { params: { page: 1, size: 10 }, headers: { Authorization: Bearer xxx }, timeout: 5000 })2.axios.post(url, data, config)参数位置类型必需说明url第一个string✅ 是请求地址data第二个any✅ 是要发送的请求体通常是对象/数组/FormDataconfig第三个object❌ 否同 GET 的 config额外可设置paramsURL 参数示例javascriptaxios.post(/api/login, { username: admin, password: 123 }, { headers: { Content-Type: application/json }, params: { version: 2 } // URL 附加 ?version2 } )同理axios.put(url, data, config)、axios.patch(url, data, config)参数位置与 post 相同。二、通用函数axios(config)只有一个参数配置对象。所有信息都写在这个对象里。配置字段类型必需说明urlstring✅ 是请求地址methodstring❌ 否默认get可写post、put等paramsobject❌ 否URL 查询参数dataany❌ 否请求体POST/PUT 时需要headersobject❌ 否自定义请求头timeoutnumber❌ 否超时毫秒responseTypestring❌ 否如json、text、blobwithCredentialsboolean❌ 否跨域是否携带凭证示例GET 请求axios({ method: get, url: /api/users, params: { page: 1 }, headers: { Authorization: Bearer xxx } })示例POST 请求axios({ method: post, url: /api/login, data: { username: admin, password: 123 }, headers: { Content-Type: application/json }, params: { version: 2 } })三.fetch(url,option)url请求地址必填options配置对象可选用于指定 method、headers、body 等返回值是一个Promiseresolve 时得到一个Response对象。常用参数options字段类型默认值说明methodstringGETHTTP 方法headersobject/Headers{}请求头bodystring/FormData/Blob等无请求体GET/HEAD 不可用modestringcors跨域模式cors、no-cors、same-origincredentialsstringsame-origin是否携带 cookieinclude、same-origin、omitcachestringdefault缓存模式redirectstringfollow重定向处理follow、error、manual3️⃣ 处理响应response对象包含常用属性data– 实际返回的数据status– HTTP 状态码如 200statusText– 状态文本如 OKheaders– 响应头config– 本次请求的配置5️⃣ 错误处理error对象可以区分不同错误类型javascript.catch(error { if (error.response) { // 服务器返回了非 2xx 状态码 console.log(状态码:, error.response.status); console.log(错误数据:, error.response.data); } else if (error.request) { // 请求已发出但没有收到响应网络中断等 console.log(无响应:, error.request); } else { // 设置请求时发生错误 console.log(配置错误:, error.message); } });6️⃣ 常用进阶用法async/await推荐javascriptasync function fetchData() { try { const response await axios.get(/api/data); console.log(response.data); } catch (error) { console.error(error); } }全局配置 baseURL避免重复写域名javascriptaxios.defaults.baseURL https://api.example.com;拦截器统一处理 token、日志等javascript// 请求拦截器 axios.interceptors.request.use(config { config.headers.Authorization Bearer localStorage.getItem(token); return config; }); // 响应拦截器 axios.interceptors.response.use( response response, error { if (error.response.status 401) { // 跳转登录页 } return Promise.reject(error); } );四. 跨域问题

AJAX、跨域与常用请求库实战指南

相关推荐

架构拆解｜面向 TikTok 带货场景，多基座大模型电商素材工程化落地实践

30、实战：自定义Input设备驱动与事件注入，编写一个虚拟触摸屏驱动并验证事件分发

29、Input系统与SurfaceFlinger的交互：事件注入与屏幕坐标映射，DisplayInfo的作用

更多资讯

工业企业数据质量治理从救火到工程化：监控规则、责任矩阵与问题闭环落地指南

协同教学课程信息服务系统：SpringBoot+Vue毕设设计与实现

工业企业数据质量治理进阶：从清洗到体系化管控

汽车防撞梁优化设计开题报告：碰撞安全、仿真与多目标优化关键点

美赛数学建模实战：模型选择与代码实现指南

Claude Opus 5.5 焚诀实战：CLAUDE.md 与 Sub-agent 编排指南

今日更新

PHP htmlentities()函数用法讲解

AI Agent工程实战：从七要素到七个决策点的系统设计指南

AI入局芯片设计验证：验证收敛50倍加速的真相与应对

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？