博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
跨域(一)
阅读量:5055 次
发布时间:2019-06-12

本文共 2483 字,大约阅读时间需要 8 分钟。

跨域源资源共享

通过XHR实现Ajax通信的一个主要限制,来源与跨域安全策略。默认情况下,xhr对象只能访问与包含它的页面位于同一个域中的资源。
实现合理的跨域请求对开发浏览器应用程序至关重要

CORS(Cross-Origin Resource Sharing,跨域源资源共享)

CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行狗从,从而决定请求或响应是否成功

//没有自定义头部,而主体内容是text/plain。在发送该请求时,附加一个额外的Origin头部Origin:http://www.nczonline.net
//如果服务器认为这个请求可以接受,就在Access-Control-Allow-Origin头部中回发相同的源信息Access-Control-Allow-Origin:http://www.nczonline.net

如果没有这个头部,或者这个头部但源信息不匹配,浏览器就会驳回请求。正常情况下,浏览器会处理请求。

*:请求和响应都不包含cookie信息

 

跨浏览器的CORS

检测xhr是否支持CORS的最简单方式,就是检查是否存在withCredentials属性。再结合检测XDomainRequest对象是否存在,就可以兼顾所有浏览器

function createCORSRequest(method,url){    var xhr=new XMLHttpRequest();    // "withCredentials"属性是XMLHTTPRequest2中独有的    if("withCredentials" in xhr){        xhr.open(method, url, true);    }else if(typeof XDomainRequest!='undefined'){        // 检测是否XDomainRequest可用        xhr =new XDomainRequest();        xhr.open(method,url);     }else{        //othewise CORS is not supported by the browser        xhr=null;    }    return xhr;}var request = createCORSRequest("get", "http://182.254.146.112/demo.php");if (request){    request.onload = function(){        console.log(request.responseText);        //对 request.responseText 进行处理    };    request.send();}

 

其他跨域技术-图像ping

虽然CORS技术已经无处不在,但开发人员自己发明的这些技术仍然被广泛使用,毕竟这样不需要修改服务器代码
我们知道,一个网页可以从任何网页中加载图像,不用担心跨域不跨域。
动态创建图像经常用于图像Ping。图像Ping是与服务器进行简单、单向的跨域通信的一种方式

var img = new Image();img.onload = img.onerror = function(){    alert('Done!);}img.src = 'http://www.example.com/test?name=Nicholas';

图像Ping最常用与跟踪用户点击页面或动态广告曝光次数。图像Ping两个主要的缺点。一是只能发送get请求,二是无法访问服务器的响应文本。

因此,图像Ping只能用于浏览器与服务器间的单向通信

 

其他跨域技术-JSONP

JSONP看起来与JSON差不多,只不过是被包含在函数调用中的JSON,就像这样

callback({ 'name':'Nicholas' })

JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入

回调函数中的json数据。下面是一个典型的JSONP请求

http://freegeoip.net/json/?callback=handleResponse

JSONP是通过动态<script>元素来使用的。这里的<script>跟<img>元素类似,都有能力不受限制地从其他域加载资源

function handleResponse(response){    alert('you are at ip address ' + response.ip + response.city +     response.region_name);}var script = document.createElement('script');script.src = 'http://freegeoip.net/json/?callback=handleResponse';document.body.insertBefore(script, document.body.firstChild);

JSONP之所以在开发人员中极为流行,主要原因是它非常简单易用。与图像Ping相比,它地优点在于能够直接访问响应文本,支持在浏览器与服务器之间双向通信。

不过,JSONP也有两点不足:
1、JSONP是从其他域中加载代码执行。如果其它域不安全,很可能会在响应中夹带一些恶意的代码,而此时除了完全放弃JSONP调用之外,没有办法追究。因此,
一定要保证它安全可靠
2、要确定JSONP请求是否失败并不容易。虽然给scrip元素新增了一个onerror事件处理程序,但目前还没有得到任何浏览器的支持。

 

转载于:https://www.cnblogs.com/wzndkj/p/8614959.html

你可能感兴趣的文章
关于cookie存取中文乱码问题
查看>>
mysql 多表管理修改
查看>>
group by order by
查看>>
Oracle学习之简单查询
查看>>
log4j配置
查看>>
linux 配置SAN存储-IPSAN
查看>>
java学习笔记之String类
查看>>
pymysql操作mysql
查看>>
Linux服务器删除乱码文件/文件夹的方法
查看>>
牛腩记账本core版本源码
查看>>
Word Break II
查看>>
UVA 11082 Matrix Decompressing 矩阵解压(最大流,经典)
查看>>
jdk从1.8降到jdk1.7失败
查看>>
一些关于IO流的问题
查看>>
mongo备份操作
查看>>
8 -- 深入使用Spring -- 3...1 Resource实现类InputStreamResource、ByteArrayResource
查看>>
硬件笔记之Thinkpad T470P更换2K屏幕
查看>>
一个关于vue+mysql+express的全栈项目(六)------ 聊天模型的设计
查看>>
【知识库】-数据库_MySQL 的七种 join
查看>>
.net 写文件上传下载webservice
查看>>