详解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 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
JavaScript构造函数详解
Dec 27 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
vue登录注册实例详解
Sep 14 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
深入探讨前端框架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笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
Python 字典dict使用介绍
2014/11/30 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
如何定义TensorFlow输入节点
2020/01/23 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
医生进修自我鉴定
2014/01/19 职场文书
养成教育经验材料
2014/05/26 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
小学数学教师研修日志
2015/11/13 职场文书
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL