网站首页 > 技术文章 正文
重点:跨域POST大量数据;
JQuery:$.ajax/$.getJSON支持jsonp格式的跨域,但是只支持GET方式,暂不支持POST;
CORS:w3c关于跨域的新方案,res.setHeader('
Access-Control-Allow-Origin','*'),兼容IE9+;
so,跨域POST是个值得研究的问题啊!万能的JQuery无法跨域POST;鉴于基本国情,CORS也只是适合在移动端玩玩;
相信有同学这样做过:
实际上chrome的控制台显示却是这样的:
那么,如图是否可以证明jQuery确实无法跨域POST呢?说好的POST呢,jQuery自动将其转为GET了;这样其实就和$.getJSON差不多了,只是$.ajax的跨域直接能回调返回值,而$.getJSON的返回值需要一个全局的callback(可自定义);
话说我的个人小站在移动端还处于最原始的缩放状态,说好的H5 Response Web呢?原谅我再一次跑偏了:原本计划或者直接在原有样式表里media query;而结果却是我新开了个站点,作为移动端的版本,读取PC端存储的数据;一方面减轻代码量,使移动端更轻量简洁,毕竟只是个博客嘛;另一方面,这样的话,移动端将有更宽广的随意挥洒的空间;再者,基于性能优化,这样也不错;当然,问题也很明显了;两个站点要共享数据,连同一个数据库,要做同步操作,呵呵,我一个小前端,这些貌似目前想太多啊!那么怎么办呢,是的,就是上面说到的问题,前端跨域请求数据;
移动端的库用的是由zepto的一些模块自定义组装的一个版本,bootstrap什么的一边凉快凉快吧,样式手写的,权当练手吧。。。在后端,由Nodejs的http-proxy做代理,判断请求的UA,如果是移动端的访问,则无论host是www.famanoder.com还是m.famanoder.com全都分发到移动端的站点处理,这样在手机上访问www.famanoder.com就不用做跳转了;
OK,那么要开始跨域请求和提交数据了;如果只是请求远程数据,GET方式足矣;可是如果要提交大量数据,比如,某大侠路过小站,一时兴起,引经据典,古今中外,滔滔不绝,长篇大论一通
,这样的话恐怕GET搞不定啊!先看看最简单的GET方式吧:
然后定义好全局的getmore就OK了,后端处理也简单,我这是Nodejs,其他的自行百度吧:
当然像上图里那样也是可以的,后端同样处理;
前面说了,伟大的JQuery暂时不支持POST方式的跨域;那咋办呢?其实没有想象的那么复杂,是时候证明你不能太依赖JQuery了,有时候没有她,你也要好好过;
基本原理大概是这样的:form表单提交,无论你是post,还是get,无论你提交到哪,只要后端有对应程序处理,都妥妥的,不存在跨域一说;以前无刷新上传、提交表单都是将form的target指向一个空iframe,此处同理;类似:a.com提交表单到b.com,表单的target为一个空iframe;b.com处理请求,在response里执行callback,注意,此处callback是属于那个空iframe的;
后端的处理基本一样;如果不出意料,到此,请求会在控制台出现一片红,是的,要你设置domain;除了页面和对应js要设置domain外,一定别忘啦,response里的callback其实是属于当前页面的,所以response里执行的callback也要设置domain;类似这样:
OK,没有了她,你依然要好好过;这样你就可以POST跨域提交大量数据了;同时也弥补了JQuery只能通过jsonp GET跨域了;当然CORS在移动端也是值得推荐的;小伙伴们可以试一下,或者有其他什么好办法,记得和我分享啊!
猜你喜欢
- 2025-09-18 用户中心——比如:腾讯的QQ账号可以登录到很多应用当中 02
- 2025-09-18 企业级文档协同解决方案:深度整合OnlyOffice(私有化部署指南)
- 2025-09-18 vue 如何实现跨域_vue如何实现跨域proxy
- 2025-09-18 深入跨域 - 解决方案_跨域入网是什么意思
- 2025-09-18 什么是跨域?如何解决跨域问题?_什么是跨域?怎么解决跨域问题?
- 2025-09-18 工作中,如何解决跨域问题?_列举几种解决跨域问题的方式,且说明原理
- 2025-09-18 大白话聊一聊浏览器跨域问题_浏览器插件跨域
- 2025-09-18 PHP解决跨域问题_phpsession跨域
- 2025-09-18 常见跨域解决方案(一)_常见跨域及其解决方案
- 2025-09-18 Spring Boot3 中安全解决跨域问题的深度剖析(二)
你 发表评论:
欢迎- 最近发表
-
- Three.js vs Unity:工业可视化为何选择Web方案?
- 一款全新Redis UI可视化管理工具,支持WebUI和桌面——P3X Redis UI
- 时间线可视化实战:三款AI工具实测,手把手教你制作人生轨迹图
- 【推荐】一款可视化在线 Web 定时任务管理平台,支持秒级任务设置
- 重磅更新!FastDatasets 推出可视化 Web 界面
- 模具设计之UG钣金实例教程(3)_ug钣金基础教程
- 前端基于 RBAC 模型的权限管理实现
- 别再把JWT存在localStorage里了!2025年前端鉴权新思路
- 模具设计之曲面造型中不圆润的曲面如何处理技巧
- 9个专业级别的CSS技巧区分了解和精通的鸿沟
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (58)
- oracle面试 (55)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)