ajax跨域访问遇到的问题及解决方案


Posted in Javascript onMay 23, 2019

Ajax请求一个目标地址为非本域(协议、域名、端口任意一个不同)的web资源,并根据响应获得外部应用数据。比如我们用Ajax访问城市天气预报、IP地址等公共服务接口时,就涉及跨域了。我们请求一个外部服务时,浏览器会基于安全问题拒绝授权访问。

而script、script、iframe标签的src属性就不存在跨域的问题,所以Ajax跨域就是利用这一点以及js对JSON的支持,外部服务只要给Ajax的请求响应一段JS代码或JSON数据,就能被Ajax获取到。

由于安全方面的原因, 客户端js使用xmlhttprequest只能用来向来源网站发送请求,比如在www.readlog.cn下去请求test.readlog.cn的数据,都是不行的。不过,解决办法倒是不少。这里整理一下。

解决方式1 web代理的方式 (on Server A)

由该页面代替用户页面完成交互,从而返回合适的结果。此方案可以解决现阶段所能够想到的多数跨域访问问题,但要求A网站提供Web代理的支持,因此A网站与B网站之间必须是紧密协作的,且每次交互过程,A网站的服务器负担增加,且无法代用户保存session状态。

解决方式2. on-Demand方式 (on Server A)

MYMSN的门户就用的这种方式,不过 MYMSN中不涉及跨域访问问题。在页面内动态生成新的

解决方式3. iframe方式 (on Server A)

查看过醒来在JavaEye上的一篇关于跨域访问的帖子,他提到自己已经用iframe的方式解决了跨域访问问题。数据提交跟获取,采用iframe这种方式的确可以了,但由于父窗口与子窗口之间不能交互(跨域访问的情况下,这种交互被拒绝),因此无法完成对父窗口效果的影响。

在页面内嵌或动态生成指向别的网站的IFRAME,然后这2个网页间可以通过改变对方的anchor hash fragment来传输消息。改变一个网页的anchor hash fragment并不会使浏览器重新装载网页,所以一个网页的状态得以保持,而网页本身则可以通过一个计时器(timer)来察觉自己anchor hash的变化,从而相应改变自己的状态。

解决方式4. 用户本地转储方式 (local)

IE本身依附于windows平台的特性为我们提供了一种基于iframe,利用内存来“绕行”的方案,即两个window之间可以在客户端通过windows剪贴板的方式进行数据传输,只需要在接受数据的一方设置Interval进行轮询,获得结果后清除Interval即可。FF的平台独立性决定了它不支持剪贴板这种方式,而以往版本的FF中存在的插件漏洞又被fixed了,所以FF无法通过内存来完成暗渡陈仓。而由于文件操作FF 也没有提供支持(无法通过Cookie跨域完成数据传递),致使这种技巧性的方式只能在IE中使用。

解决方式5: (其实还是在服务端A用iframe解决了与服务器B通信的问题)

要解决的问题:发生在用户提交网页 URL (还包括 Tag, Notes 等)给bookmark 服务器时。

关于 URL 的提交至少可以有三种方式:

1. 登陆 Bookmark 服务器的提交页面,将要收藏的 URL 通过该页面提交给服务器。
2. 安装浏览器插件,通过插件将 URL 提交给服务器。
3. 从 Bookmark 服务器动态加载 javascript 小工具到当前页面,通过它来完成提交工作。

第一种方式开发起来最简单,但对用户来讲比较麻烦,每次都需要先登陆 Bookmark 服务器才能完成提交;第二种方式我并不熟悉插件开发,而且用户也不喜欢太多的插件堆满自己的浏览器;第三种方式开发难度小,又避免了每次登陆服务器的麻烦,所以最终采用它。第三种方式中动态加载的 javascript 小工具除了需要生成 UI 供用户填写信息( URL , tag , notes 等),当用户点击提交的时候,还要完成与服务器通信的功能。

Javascript 相关文章推荐
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
js键盘事件的keyCode
Jul 29 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 Javascript
简单了解JavaScript异步
May 23 #Javascript
vue项目添加多页面配置的步骤详解
May 22 #Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 #Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 #Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 #Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 #Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 #Javascript
You might like
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
php跨站攻击实例分析
2014/10/28 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
微信红包随机生成算法php版
2016/07/21 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
Javascript 读后台cookie代码
2008/09/15 Javascript
jquery 选择器部分整理
2009/10/28 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
基于JS实现web端录音与播放功能
2019/04/17 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
python使用htmllib分析网页内容的方法
2015/05/08 Python
python:动态路由的Flask程序代码
2019/11/22 Python
物业客服专员岗位职责
2013/11/30 职场文书
总裁秘书岗位职责
2013/12/04 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
考博专家推荐信
2014/05/10 职场文书
新教师培训心得体会
2014/09/02 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
工作作风建设心得体会
2014/10/22 职场文书
单位车辆管理制度
2015/08/05 职场文书
python异常中else的实例用法
2021/06/15 Python
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电