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 相关文章推荐
JavaScript中“基本类型”之争小结
Jan 03 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
创建echart多个联动的示例代码
Nov 23 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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
php二维码生成以及下载实现
2017/09/28 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
JS 判断undefined的实现代码
2009/11/26 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
Python脚本实现自动发带图的微博
2016/04/27 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
python编写计算器功能
2019/10/25 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
Pygame框架实现飞机大战
2020/08/07 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
自荐信不宜过于夸大
2013/11/06 职场文书
国际贸易求职信
2014/07/05 职场文书
2014年质检员工作总结
2014/11/18 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
我的收音机情缘
2022/04/05 无线电
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers