博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js跨域原理及解决方案
阅读量:5069 次
发布时间:2019-06-12

本文共 1908 字,大约阅读时间需要 6 分钟。

方法一:jsonp函数

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

script标签本身就可以访问其它域的资源,不受浏览器同源策略的限制,可以通过在页面动态创建script标签。

var script = document.createElement('script');  script.src = "http://aa.xx.com/js/*.js";  document.body.appendChild(script);

这样通过动态创建script标签加载其它域的js文件,然后通过本页面调用加载后js文件的函数,这样做的缺陷是不能加载其它域的文档,只能是js文件,jsonp便是通过这种方式实现的,jsonp通过向其它域传入一个callback参数,通过其他域的后台将callback参数值和json串包装成javascript函数返回,因为是通过script标签发出的请求,浏览器会将返回来的字符串按照javascript进行解析执行,实现域与域的数据传输。
jquery中对jsonp的支持也是基于此方案。
例如:服务器返回的数据不能是单纯的如{“Name”:”hofmann”}字符串,我们是没有办法引用这个字符串的.所以,要求返回的值是var json={“Name”:”zhangsan”},或json({“Name”:”zhangsan”})

服务端:

protected void retJSON(){    string callback = Request.QueryString["jsoncallback"];    string result = callback + "({\"name\":\"hofmann\",\"date\":\"2019-05-08\"})";    Response.Clear();    Response.Write(result);    Response.End();}

客户端代码:

$.ajax({     async: false,     url: "http://192.168.0.5/APi/Js",     type: "GET",     dataType: 'jsonp',     jsonp: 'jsoncallback',     data: null,     timeout: 5000,     contentType: "application/json;utf-8",     success: function (result) {         alert(result.date);     },     error: function (jqXHR, textStatus, errorThrown) {         alert(textStatus);     } });

js向服务器发出了这样一个请求:
http://192.168.0.5/APi/Js?jsoncallback=jsonp20190508
服务器返回对象:
jsonp20190508({"name":"hofmann","date":"2019-05-08"})
此时就实现了跨域范文数据的要求.

方法二:iframe实现跨域
基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于同一个顶级基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实现父页面调用子页面的函数,代码如下:
页面一

                           
View Code

页面二

                    

 

这时候父页面就可以调用子页面的b函数,实现js跨域访问

方法三:后台代理方式

这种方式可以解决所有跨域问题,也就是将后台作为代理,每次对其它域的请求转交给本域的后台,本域的后台通过模拟http请求去访问其它域,再将返回的结果返回给前台,这样做的好处是,无论访问的是文档,还是js文件都可以实现跨域

参考

 

转载于:https://www.cnblogs.com/hofmann/p/10829373.html

你可能感兴趣的文章
centos6.8下安装matlab2009(图片转帖)
查看>>
Mongo自动备份
查看>>
cer证书签名验证
查看>>
新手Python第一天(接触)
查看>>
【bzoj1029】[JSOI2007]建筑抢修
查看>>
synchronized
查看>>
codevs 1080 线段树练习
查看>>
[No0000195]NoSQL还是SQL?这一篇讲清楚
查看>>
【深度学习】caffe 中的一些参数介绍
查看>>
Python-Web框架的本质
查看>>
QML学习笔记之一
查看>>
Window 的引导过程
查看>>
App右上角数字
查看>>
从.NET中委托写法的演变谈开去(上):委托与匿名方法
查看>>
小算法
查看>>
201521123024 《java程序设计》 第12周学习总结
查看>>
新作《ASP.NET MVC 5框架揭秘》正式出版
查看>>
IdentityServer4-用EF配置Client(一)
查看>>
WPF中实现多选ComboBox控件
查看>>
读构建之法第四章第十七章有感
查看>>