域和跨域

来源：互联网发布：固定资产管理系统源码编辑：程序博客网时间：2024/05/06 08:31

域和跨域

sf2gis@163.com

2016年1月22日

2016年2月17日增加chrome本地文件访问

2016年10月18日添加iframe和mule

1 域和跨域

URL由协议，IP，端口和路径组成。其中，具有相同的协议，IP和端口，则属于同一个WEB网站，称为一个域，也称为同源策略。

域、同源策略：目标是保证同一个页面的dom具有唯一性，并隔离不同页面的脚本，提高安全性。所有支持javascript的浏览器都使用此策略。

参考：http://baike.baidu.com/view/3747010.htm

跨域：就是操作不同域中页面的方法。常用方法为JSONP或使用Nginx转换为同域。

参考：http://blog.csdn.net/shimiso/article/details/21830313

http://blog.jobbole.com/53487/

2IFrame请求：直接使用iframe进行请求，直接获取数据。

单次请求，同步，无法操作样式等，但不存在跨域问题。

示例：

result ="<iframe src='" + url + "' style='border:none'>";

3JSONP：JSONPadding transmit protocol，json填充的跨域请求协议。

3.1 目标：在不同的域之间传递数据。

3.2 原理：动态创建JS脚本。

参见：jQuery.docx《jsonp》。

3.3 方法：客户端通过url向服务器发送数据和请求，并发送回调函数名。服务器接收到请求处理后，将结果数据以JSON格式作为回调函数的参数，返回（调用）。

由于操作方式与ajax相似，并且ajax需要jsonp进行跨域，所以归入ajax中。

3.4 示例：

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Untitled Page</title>

<scripttype="text/javascript" src=jquery.min.js"></script>

<scripttype="text/javascript">

jQuery(document).ready(function(){

$.ajax({

type: "get",

async: false,

url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",

dataType: "jsonp",

jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

success: function(json){

alert('您查询到航班信息：票价：' + json.price + ' 元，余票： ' + json.tickets + ' 张。');

error: function(){

alert('fail');

}

});

</script>

</head>

<body>

</body>

</html>

参考：

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html#undefined

http://www.zhihu.com/question/19966531

4CROS：crossorigin属性

跨域特性：crossOrigin,默认是anonymous（匿名，无须授权）。还可以使用use-credentials（使用授权）。

参考：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin

https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image

5Nginx将跨域转化为同域

参见：..\Java\跨域WebService请求-Nginx_SOAP服务_Ajax客户端.docx

6Mule将跨域转化为同域

参见：..\ESB\Mule.docx《多个网站同域化处理》。

7服务器代理：同域服务器代理跨域的请求

参见：Java-webservice-CXF-SOAP服务.docx服务器代理客户端。

8扩展：chrome的本地文件访问

在chrome的启动快捷方式中设置目标为下述命令，关闭安全策略，允许访问文件。

"C:\Program Files(x86)\Google\Chrome\Application\chrome.exe" --disable-web-security--allow-file-access-from-files

"C:\ProgramFiles\Google\Chrome\Application\chrome.exe" --args --disable-web-security

参考：http://blog.csdn.net/greatpresident/article/details/10158607

http://camnpr.com/archives/chrome-args-disable-web-security.html

0 0