js跨域及解决方案

来源：互联网发布：金融数据分析工具编辑：程序博客网时间：2024/05/16 15:23

AJAX 跨域请求 - JSONP获取JSON数据：http://justcoding.iteye.com/blog/1366102

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。

　　JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略，在baidu.com下的页面中包含的JavaScript代码，不能访问在google.com域名下的页面内容；甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。对于Ajax的影响在于，通过XMLHttpRequest实现的Ajax请求，不能向不同的域提交请求，例如，在abc.example.com下的页面，不能向def.example.com提交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不同域名不允许

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>
方案二，通过jquery来完成
通过jquery的jsonp的方式.使用此方式,对服务器端有要求.
服务器端如下:
        protected void Page_Load(object sender, EventArgs e)        {            string callback = Request.QueryString["jsoncallback"];            string result = callback + "({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";            Response.Clear();            Response.Write(result);            Response.End();        }
客户端:
$.ajax({
                async: false,
                url: "http://192.168.0.5/Web/web1.aspx",
                type: "GET",
                dataType: 'jsonp',
                //jsonp的值自定义,如果使用jsoncallback,那么服务器端,要返回一个jsoncallback的值对应的对象.
                jsonp: 'jsoncallback',
                //要传递的参数,没有传参时，也一定要写上
                  data: null,
                timeout: 5000,
                //返回Json类型
                  contentType: "application/json;utf-8",
                //服务器段返回的对象包含name,data属性.
                success: function (result) {
                    alert(result.date);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
实际上,在我们执行这段js时,js向服务器发出了这样一个请求:
http://192.168.0.5/Web/web1.aspx?jsoncallback=jsonp1354505244726&_=1354505244742

而服务器也相应的返回了如下对象:
jsonp1354506338864({"name":"zhangsan","date":"2012-12-03"})
此时就实现了跨域范文数据的要求.

0 0