详解js跨域原理以及2种解决方案


Posted in Javascript onDecember 09, 2015

1.什么是跨域

我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题.

跨域问题是由于javascript语言安全限制中的同源策略造成的.

简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.

例如:

详解js跨域原理以及2种解决方案

2.实现原理

在HTML DOM中,Script标签是可以跨域访问服务器上的数据的.因此,可以指定script的src属性为跨域的url,从而实现跨域访问.

例如:

这种访问方式是不行的.但是如下方式,却是可以的.

这里对返回的数据有个要求,即:服务器返回的数据不能是单纯的如{“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>

方案二:通过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"})

此时就实现了跨域范文数据的要求.

以上就是关于js跨域原理以及2种解决方案介绍,希望对大家学习跨域知识点有所帮助,大家也可以结合其他相关文章进行学习研究。

Javascript 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
vue实现文字加密功能
Sep 27 Javascript
深入探讨前端框架react
Dec 09 #Javascript
JavaScript中rem布局在react中的应用
Dec 09 #Javascript
js获取鼠标位置实例详解
Dec 09 #Javascript
JavaScript常用基础知识强化学习
Dec 09 #Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 #Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 #Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 #Javascript
You might like
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
各种快递查询--Api接口
2016/04/26 PHP
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
Python实现曲线点抽稀算法的示例
2017/10/12 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
关于python字符串方法分类详解
2019/08/20 Python
Python实现ATM系统
2020/02/17 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
司机辞职报告范文
2014/01/20 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
软件售后服务承诺书
2014/05/21 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
请客吃饭开场白
2015/06/01 职场文书
中学校园广播稿
2015/08/18 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
技术入股协议书
2016/03/22 职场文书