JS 中的跨域请求
跨域请求并不仅仅只是 Ajax 的跨域请求,而是对于一个页面来说,只要它请求了其他域名的资源了,那么这个过程就属于跨域请求了。
比如,一个带有其他域名的 src 的 <img> 标签,以及页面中引入的其他第三方的 CSS 样式等。
对于 img 以及 CSS 而言,跨域请求本身并没有更多的安全问题,因为这些请求都属于只读请求,并不会对源资源造成副作用。
而如果跨域请求是从脚本里面发出去的,由于脚本具有高度灵活性,浏览器出于安全考虑,会根据同源策略来限制它的功能,使得正常情况下,脚本只能请求同源的资源。
如果页面确实需要通过脚本请求其他网站的资源,那么就应当在跨域资源共享的机制下工作。
同源策略
对于两个页面(资源)而言,只要他们满足以下三个条件则称他们符合同源策略:
协议相同
端口相同
域名相同
可以通过JS 设置 document.domain 来通过同源策略。如:
在子域 http://a.example.com/test.html 的页面中,通过 JS 设置 document.domain='example.com' ,则当前页面与 http://example.com/page.html 符合同源策略。
简单的说,对于页面 http://www.example.com/page1.html 来说,以下页面与它都不符合同源策略,脚本无法直接请求这些资源:
https://www.example.com/page1.html : 协议不同
http://www.example.com:81/page1.html : 端口不同
http://another.example.com/page1.html : 域名不同
如果用的是jquery的话 可以用jsonp解决跨域
$.ajax({
url:"http://crossdomain.com/services.php",
dataType:'jsonp',
data:'',
jsonp:'callback',
success:function(result) {
for(var i in result) {
alert(i+":"+result[i]);//循环输出
}
}
});
$.get('http://crossdomain.com/services.php?callback=?',
{name: encodeURIComponent('tester')},
function (json) {
for(var i in json) {
alert(i+":"+json[i]);
}
}, 'jsonp');
Jsonp原理
<script src="http://www.example.net/api?param1=1¶m2=2"></script>
并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。
第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),
这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。
最新文章
- OutPut子句的使用限制
- Ubuntu 14 設定 遠端連線,讓別台電腦可以連線進來
- Mac系统搭建Go语言Sublime Text 2环境配置
- POJ C++程序设计 编程题#1 大整数的加减乘除
- 基于zmap 的应用层扫描器 zgrab (一)
- char*,const char*和string的相互转换
- this关键字之一个有趣的用法
- 一道C语言面试题:得到整数的M进制表示字符串
- 点击TextView浏览器打开指定网页
- ${pageContext.request.contextPath}的作用
- Chapter 4 Invitations——21
- SVN项目迁移到Git上(并带有完整的提交记录)
- Visual studio2015 编译时提示“GenerateResource”任务意外失败。
- 遇到问题---hosts不起作用问题的解决方法
- install virtualenv
- CPU和线程的关系
- nginx如何启用对HTTP2的支持 | nginx如何验证HTTP2是否已启用
- maven 阿里仓库
- 初中级web前端工程师的面试题分享
- 【译】关于vertical-align你应知道的一切
热门文章
- TelephonyUtils
- 8and9 pod控制器
- mybaits及mybaits generator 插件使用指南(亲测原创)
- switch语句 initialization of &#39;XXX&#39; is skipped by &#39;case&#39; label 原因及解决办法--块语句的作用
- IDEA的热部署设置方式
- 关于MacBook Pro外接4K/60HZ显示器的问题
- jekins自动部署tomcat注意事项、连接tomcat报错
- MySQL数据库锁机制之MyISAM引擎表锁和InnoDB行锁详解
- Android studio无法发现nexus 5x解决方法
- svn本地文件颜色详解