`
daimojingdeyu
  • 浏览: 274919 次
  • 性别: Icon_minigender_1
  • 来自: 山东
社区版块
存档分类
最新评论

同源策略、跨越请求和JSONP

阅读更多

1、同源策略

 

 

同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。这个策略可以追溯到 Netscape Navigator 2.0。

Mozilla 认为两个页面拥有相同的源,如果它们的协议、端口(如果指明了的话)和主机名都相同。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:

URL 结果 原因
http://store.company.com/dir2/other.html 成功
http://store.company.com/dir/inner/another.html 成功
https://store.company.com/secure.html 失败 协议不同
http://store.company.com:81/dir/etc.html 失败 端口不同
http://news.company.com/dir/other.html 失败 主机名不同

同源策略,简单地说就是要求动态内容(例如,JavaScript或者VBScript)只能阅读与之同源的那些HTTP应答和cookies,而不能阅读来自不同源的内容。更为有趣的是,同源策略对写操作没有任何限制。

 

2、JSONP

以上同源策略是基于安全考虑的,当前域不能访问其他域的东西。但这也带来一个问题,不同域之间如何协助。

 

先看一个简单的不同源请求的例子。准备2段代码,用来模拟2个不同源的服务器,分别部署在2个不同的web容器上。为了方便,我们直接使用jquery进行异步请求,不使用原生的 XMLHttpRequest.

 

localfile.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<body>
	<script type="text/javascript">
	$(document).ready(function () {
		$.get('./sayhello.js', function(result) {});
		$.get('http://freeyun.duapp.com/jsonp/sayhello.js', function(result) {});
	});
	</script>
</body>
</html>

 

 

sayhello.js

 

alert("hello jsonp");
 

 

这两个文件同时放到一个远程的服务器freeyun.duapp.com和本机的容器localhost的容器上。

在本机访问http://localhost:8080/jsonp/localfile.html,我们只能看到一个 hello jsonp的提示框。

通过F12打开chrome流程器的调试窗口,刷新,在network一栏可以看到如下信息:

 

对于远程服务器的请求出错了。

在console栏可以看到出错信息为:

XMLHttpRequest cannot load http://freeyun.duapp.com/jsonp/sayhello.js. Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

这个也就是因不同源导致了一个跨域请求失败。

 

那怎么解决这个问题呢?你一定发现了刚刚我们localfile.html里对jquery的引用,script标签里src属性里的jquery路径和我们的本地服务器并不是同源的,也就是说script标签里的src属性里的路径不受同源策略的限制的。

 

 

我们修改一下localfile.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://freeyun.duapp.com/jsonp/sayhello.js"></script>
</head>
<body>
</body>
</html>

 

 重新访问localfile.html,这样依然会弹出 hello jsonp 的提示框,也就是说我们能过本地服务器访问到的远程服务器信息。

 

 

通过script标签的开放策略,抓到的资料并不是 JSON,而是任意的 JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

 JSON只是一种数据描述格式,究竟是JSONP还是其他的“XXP”、“YYP”其实只是2个不同源的服务器之间的数据交换采用什么样的格式而已。

 

 

因为跨域的请求主要是为了能从别的服务器上获取数据,那么一般在数据获取完成后本地服务器都会做相应的数据处理,所以在JSONP这种模式里,会要求把返回结果放到本地一个回调函数中,这样就能直接通过本地回调方法对数据进行加工,这也就是我们常说的JSONP模式。

 

  • 大小: 32.2 KB
分享到:
评论
1 楼 mywhy 2014-08-27  
写的很好。很快解决了自己的问题。

相关推荐

    Ajax跨域请求解决方案-JSONP

    然而,Ajax技术在实现动态网页交互时常常需要跨越这个限制,这时就引入了JSONP(JSON with Padding)作为跨域请求的一种解决方案。本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域...

    ajax跨越请求

    总结,Ajax跨域请求涉及浏览器的同源策略、CORS、JSONP、POSTMessage等多个知识点,理解并熟练运用这些技术是现代Web开发中的必备技能。在确保安全性的前提下,合理地利用跨域机制可以极大地提升用户体验和应用性能...

    jsonp.pdf文件

    然而,AJAX的核心组件XMLHttpRequest受到同源策略的限制,只能在同一个域名下进行请求。这种限制虽然增强了安全性,但在实际开发中却限制了不同域名间的服务交互能力。例如,在方案中心项目中,为了提供统一的评论...

    JSONP解决跨域问题

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性,为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中,前端使用...

    js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

    由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON...

    ASPNET_JSONP_demo(jq跨域)

    【ASP.NET JSONP 实现 jQuery ...总之,通过 ASP.NET 和 jQuery 实现 JSONP 跨域通信,开发者可以轻松地跨越同源策略的限制,实现前后端数据交互。这个示例项目提供了一个基础模板,你可以根据实际需求进行扩展和定制。

    javaweb跨越问题

    当一个域下的网页尝试请求另一个不同源的资源时,浏览器会遵循同源策略,阻止这种跨域请求,除非服务器明确允许。本篇将深入探讨这个问题,并提供解决方案。 首先,理解什么是同源策略。同源策略是Web浏览器为保障...

    Jquery跨域Json请求处理

    **JSONP**是一种绕过同源策略的技术,它利用了`&lt;script&gt;`标签不受同源策略限制的特点。当使用JSONP进行跨域请求时,客户端会向服务器端发送一个请求,并在URL中附加一个回调函数名作为参数。服务器端接收到请求后,...

    跨域访问演示环境和代码

    当需要跨越这一限制时,我们就需要使用到如JSONP和CORS这样的解决方案。 首先,我们来看一下"跨域访问演示环境和代码"的背景。在这个场景中,使用了两个运行在不同端口上的Tomcat服务器来模拟跨域情况。通常,两个...

    jquery跨域获取json

    这通常涉及到AJAX请求和JSONP(JSON with Padding)技术。 首先,我们需要理解Web浏览器的同源策略(Same-Origin Policy),这是一种安全机制,它限制了网页只能访问与自身协议、域名和端口完全相同的资源。这限制...

    跨域请求的几种方式

    ### 跨域请求的几种方式 ...综上所述,JSONP和CORS是两种常用的跨域请求解决方案。JSONP适用于简单的GET请求场景,而CORS则更为通用,可以处理各种类型的HTTP请求。在实际项目中,应根据具体需求选择合适的技术方案。

    arcgis api for silverlight跨域文件

    2. **使用JSONP(JSON with Padding)**:如果服务端不支持CORS,可以考虑使用JSONP,这是一种在旧版本浏览器中绕过同源策略的方法。JSONP通过动态插入`&lt;script&gt;`标签来实现跨域请求,服务器返回的响应被包装在一个...

    详解Spring Boot 2.0.2+Ajax解决跨域请求的问题

    解决跨域请求的方法有多种,包括JSONP、引用A站的JS、Nginx做A站的反向代理、后端服务放开跨域请求等。其中,后端服务放开跨域请求是最常用的方法。 知识点4:Spring Boot中放开跨域请求 在Spring Boot中放开跨域...

    tomcat解决跨越问题

    然而,在现代Web应用中,前后端分离、API接口等需求使得跨域请求变得普遍,这就需要我们找到一种方法来规避同源策略的限制。 2. Tomcat配置CORS过滤器: CORS(Cross-Origin Resource Sharing)是一种W3C标准,...

    WCF REST服务中对JSONP的支持

    JSONP允许跨域请求,因为它利用的是`&lt;script&gt;`标签不受同源策略限制的特性。 4. **C# 4.0**:C#的第四次重大版本,引入了动态类型、命名参数、可空值类型等新特性,使得开发更加灵活。 5. **.NET Framework 4**:...

    跨域demo.rar

    - **JSONP(JSON with Padding)**:通过动态插入`&lt;script&gt;`标签,利用script标签不受同源策略限制的特点,由服务器返回JavaScript函数调用,实现跨域数据获取。 - **CORS**:服务器端设置响应头`Access-Control-...

    jquery与服务器跨越源码

    标题中的“jquery与服务器跨越源码”涉及到的是前端JavaScript库jQuery和后端C#(.NET框架)在处理跨域请求时的技术要点。跨域是Web开发中的一个重要概念,由于浏览器的安全策略,JavaScript通常不能向不同源(协议+...

    解决openlayers跨域访问的解决方案

    1. **jsonp (JSON with Padding)**: JSONP是一种绕过同源策略的方式,它通过动态创建`&lt;script&gt;`标签并设置`src`属性为带有回调函数的URL来实现。OpenLayers支持在WMS请求中使用JSONP。你需要确保你的地图服务器支持...

    ajax 示例源码(经典)

    8. **JSONP和WebSockets**:在某些情况下,如绕过同源策略获取数据,可能会使用JSONP(JSON with Padding)。而对于实时通信,WebSocket提供了双向通信通道,可以在源码中找到相关实现。 通过学习和理解这些Ajax...

Global site tag (gtag.js) - Google Analytics