同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。

跨域的简单

　　做个简单易懂的小测试。新建一个asp.net的web程序，添加sample.html网页和一个test.js文件，代码如下：

sample.html的代码：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" 3 head4     title>test</5     script type="text/javascript" src="test.js"></script6 7 body8 9 html>

test.js的代码：

1 alert("success");

　　打开sample.html后会跳出"success”这样的这样的信息框，这似乎并不能说明什么，跨域问题到底怎么解决呢？好，现在我们模拟下非同源的环境，刚才我们不是已经用Visual Studio新建了一个Web程序吗(这里我们叫A程序)，现在我们再打开一个新的Visual Studio再新建一个Web程序(B程序)，将我们的之前的test.js文件从A程序中移除然后拷贝到B程序中。两个程序都运行起来后，Visual Studio会启动内置服务器，假设A程序是localhost:20001,B程序是localhost:20002，这就模拟了一个非同源的环境了(虽然域名相同但端口号不同，所以是非同源的)。

　　OK，我们接下来应该改下sample.html里的代码，因为test.js文件在B程序上了，url也就变成了localhost:20002。

sample.html部分代码：

="http://localhost:20002/test.js">

　　请保持AB两个Web程序的运行状态，当你再次刷新localhost:20001/sample.html的时候，和原来一样跳出了"success"的对话框，是的，成功访问到了非同源的localhost:20002/test.js这个所谓的远程服务了。到了这一步，相信大家应该已经大概明白如何跨域访问了的原理了。

跨域网络访问

同源策略控制了不同源之间的交互，例如在使用XMLHttpRequest或<img>标签时则会受到同源策略的约束。交互通常分为三类：

通常允许进行跨域写操作（Cross-origin writes）。例如链接（links），重定向以及表单提交。特定少数的HTTP请求需要添加preflight。
通常允许跨域资源嵌入（Cross-origin embedding）。之后下面会举例说明。
通常不允许跨域读操作（Cross-origin reads）。但常可以通过内嵌资源来巧妙的进行读取访问。例如可以读取嵌入图片的高度和宽度，调用内嵌脚本的方法，或availability of an embedded resource.

以下是一些可以跨域内嵌的资源示例：

<script src="..."></script>标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。
<link rel="stylesheet" href="...">标签嵌入CSS。由于CSS的松散的语法规则，CSS的跨域需要一个设置正确的Content-Type消息头。不同浏览器有不同的限制：IE,Firefox,Chrome,Safari(跳至CVE-2010-0051)部分和Opera。
<img>嵌入图片。支持的图片格式包括PNG,JPEG,GIF,BMP,SVG,...
<video>和<audio>嵌入多媒体资源。
<object>,<embed>和<applet>的插件。
@font-face引入的字体。一些浏览器允许跨域字体（cross-origin fonts），一些需要同源字体（same-origin fonts）。
<frame>和<iframe>载入的任何资源。站点可以使用X-Frame-Options消息头来阻止这种形式的跨域交互。

JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。

基于Jquery的jsonp实现（JAVA）

JS如下:

$.ajax({
	type : "get",data : {'content':"aaa"},url : url,dataType:"jsonp",jsonp:"jsonpcallback",success:function(json) {
		
	}
});

Java代码如下：

@RequestMapping(value = "/list_ajax_jsonp.json")
	public void list_ajax_jsonp(String jsonpcallback,String content,HttpServletResponse response) {
		String result = null;
		try {
			//获取数据赋值result
			result = jsonpcallback + "(" + result + ")";
			response.setCharacterEncoding("UTF-8");
			PrintWriter out = response.getWriter();
			out.write(result);
			out.flush();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

原理与过程：首先在客户端注册一个callback,然后把callback的名字传给服务器。此时，服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function,function 名字就是传递上来的参数 jsonp。最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里。（动态执行回调函数）

参考地址：http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html

Jsonp跨域原理及实现

跨域的简单

跨域网络访问

相关推荐