跨域(一)

最新推荐文章于 2021-09-28 09:45:00 发布

weixin_30776273

最新推荐文章于 2021-09-28 09:45:00 发布

阅读量80

点赞数

原文链接：http://www.cnblogs.com/wzndkj/p/8614959.html

版权

跨域源资源共享
通过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