js跨域及解决方案
1.什么是跨域
我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题.
跨域问题是由于javascript语言安全限制中的同源策略造成的.
简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.
例如:
URL 说明 是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js 同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js 同一域名，不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js 不同域名 不允许
2.实现原理
在HTML DOM中,Script标签是可以跨域访问服务器上的数据的.因此,可以指定script的src属性为跨域的url,从而实现跨域访问.
例如:
这种访问方式是不行的.但是如下方式,却是可以的.
<script src=”http://192.168.0.5/Web/web1.aspx” type="text/javascript"></script>
这里对返回的数据有个要求,即:服务器返回的数据不能是单纯的如{"Name":"zhangsan"}
如果返回的是这个json字符串,我们是没有办法引用这个字符串的.所以,要求返回的值,务必是var json={"Name":"zhangsan"},或json({"Name":"zhangsan"})
为了使程序不报错,我们务必还要建立个json函数.
3.解决方案
方案一
服务器端:
protected void Page_Load(object sender, EventArgs e)
{
string result = "callback({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";
Response.Clear();
Response.Write(result);
Response.End();
}
客户端:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var result = null;
window.onload = function () {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://192.168.0.101/ExampleBusinessApplication.Web/web2.aspx";
var head = document.getElementsByTagName("head")[0];
head.insertBefore(script, head.firstChild);
};
function callback(data) {
result = data;
}
function b_click() {
alert(result.name);
}
</script>
</head>
<body>
<input type="button" value="click me!" onclick="b_click();" />
</body>
</html>
分享到：
相关推荐
JSONP是一种较早的跨域解决方案，它利用了浏览器允许`<script>`标签跨域加载资源的特性。通过动态创建`<script>`标签，并指定其`src`属性为一个返回JSON数据的函数调用，服务器将数据包裹在函数调用中返回，客户端...
1. **JSONP(JSON with Padding)**：JSONP是一种早期的跨域解决方案，它依赖于`<script>`标签不受同源策略限制的特点。通过动态创建`<script>`标签，设置其`src`属性为提供服务的服务器接口，并由服务器返回一个包裹...
JQuery的跨域解决方案主要依赖于JSONP（JSON with Padding）技术。JSONP是一种绕过同源策略的方式，它利用HTML中的`<script>`标签没有同源策略限制的特点。当jQuery使用`dataType: 'jsonp'`时，它实际上是在做以下几...
选择哪种跨域解决方案取决于应用场景和需求。JSONP适用于简单的GET请求，CORS是现代浏览器推荐的通用方案，代理服务器适用于复杂的后端集成，`document.domain`适用于同一顶级域名下的跨子域，`postMessage`适合页面...
JavaScript跨域访问解决方案 在Web开发中，由于浏览器的安全策略——同源策略（Same Origin Policy），不同源的脚本之间无法直接通信或访问彼此的资源。同源策略规定，只有当两个URL的协议、域名和端口都相同时，...
JS 跨域访问解决方案总结 JS 跨域访问解决方案总结是指在不同域名站点之间进行资源访问的解决方案。默认情况下，脚本访问文档属性等数据采用的是同源策略（Same origin policy），即如果两个页面的协议、域名和端口...
面对这样的问题，我们可以采用以下几种跨域解决方案： 1. **CORS（Cross-Origin Resource Sharing）**：服务器可以通过设置响应头`Access-Control-Allow-Origin`来允许特定的源进行跨域请求。例如，服务器端可以在...
标题《JS跨域访问解决方案总结.pdf》指明文档的核心内容是关于JavaScript跨域访问问题的解决方法。跨域访问问题是指由于浏览器的同源策略限制，网页中JavaScript代码出于安全原因不能访问另一个源（域名、协议或端口...
JSONP 是一种早期的跨域解决方案，适用于只支持GET请求的浏览器。SignalR 1.x 版本支持 JSONP，但在 SignalR 2.x 及更高版本中已被 CORS 替代。如果需要支持旧浏览器，需要确保 SignalR Hub 支持 JSONP 请求。 3. ...
### 跨域访问解决方案与Cookie处理 在现代Web开发中，跨域问题一直是困扰开发者的一大难题。当浏览器出于安全考虑阻止不同源之间的数据交互时，跨域问题便产生了。为了解决这一问题，并确保在跨域场景下可以正确地...
JavaScript跨域和Ajax跨域是Web开发中常见的问题，尤其在进行前后端分离或API调用时，由于浏览器的同源策略限制，不同域名、协议或端口的资源请求会被阻止，这就是所谓的“跨域”。本文将深入探讨JavaScript和Ajax...
JSONP是一种早期的跨域解决方案，它利用`<script>`标签不受同源策略限制的特性。服务器返回一个JavaScript函数调用，其中包含需要的数据作为参数。客户端通过创建动态`<script>`标签来执行这个函数，从而获取数据。...
JSONP是一种早期的跨域解决方案，它是通过动态创建`<script>`标签来加载数据的。因为`<script>`标签不受同源策略限制，可以通过`src`属性指向提供JSON数据的外部服务。服务端返回的数据是一个JavaScript函数调用，...
本文将深入探讨JavaScript跨域问题及其解决方案，以帮助开发者理解和应对这一问题。 首先，了解同源策略是解决问题的关键。同源策略是浏览器为了保障用户数据安全而实施的一种机制，它禁止了一个源的文档或脚本获取...
当从一个源（如浏览器中的JavaScript）尝试访问不同源（如另一个域名或端口）的服务时，浏览器会出于安全原因阻止这种请求，这就是所谓的“跨域”限制。本篇文章将详细介绍如何解决Geoserver的跨域问题。 首先，...
这个文件可能包含了创建XMLHttpRequest对象、设置请求头、处理响应等内容的JavaScript代码，用于演示如何在实际项目中应用这些跨域解决方案。开发者可以通过查看和运行这些代码来加深对JSONP和CORS的理解，并在自己...