跨域问题总结

先看概念,什么是跨域:协议、域名、端口中有任何一个不同,它们之间要通信就叫跨域。

情形 是否允许通信
同一域名下
同一域名下不同文件夹
同一域名、不同端口
同一域名、不同协议
域名和域名对应ip
主域名相同、子域名不同
不同域名

常用的跨域方式有2种:CROS(跨域资源共享Cross-Origin Resource Sharing)、JSONP

CROS:服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。该设置只被现代浏览器支持

JSONP:实际是对跨域行为的hack手段,实现原理和加载js是一个道理,所以只能实现get请求的jsonp.

在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的。

CORS和JSONP对比

CORS与JSONP相比,无疑更为先进、方便和可靠。

    1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。
    2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
    3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS)。

通过修改document.domain来跨子域

这种方式比较适合父域名相同而子域名不同的情况,通过将document.domain修改成为相同的父域名可以实现互相通信,比如:

parent.a.com/parent.html页面里有个iframe,iframe的src指向child.a.com/child.html,正常情况下这两个页面是无法实现通信的,

但是只要在parent.html和child.html里分别设置document.domain="a.com",这两个页面即可实现互相通信

(但要注意的是,document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域)

使用window.name来进行跨域

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,

每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的

使用HTML5的window.postMessage方法跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,

无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

时间: 2024-10-24 20:51:46

跨域问题总结的相关文章

js跨域

第一次写博客,好紧张,不知道能写成啥样,哈哈哈. 自己的一知片解,有错请多多指教,嘻嘻嘻. 一.何为跨域? 只要协议.域名.端口后任何一个不同,就是跨域. 举个例子: http://www.example.com 协议不同 https://www.example.com http://www.example.com 域名不同 http://www.test.com http://www.example.com 端口不同 http://www.example.com:81 注意:ip相同,域名不同

实现AJAX跨域访问方式一

1.添加pom依赖 <dependency> <groupId>com.thetransactioncompany</groupId> <artifactId>cors-filter</artifactId> <version>2.6<ersion> <!--<scope>runtime</scope>--> </dependency> 2.在web.xml 中增加配置 &l

原生jsonp跨域

<script> // jsonp跨域原生写法 var script = document.createElement('script'); script.src = 'http://192.168.7.16/kuayu/test02.php?callback=aa'; document.body.appendChild(script); //aa('后台数据') function aa(res) { alert(res.website); } </script>

跨域cors方法(jsonp,document.domain,document.name)及iframe性质

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

什么是跨域?怎么解决跨域问题?

什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制. 所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子: http://www.123.com/index.html 调用 http://www.123.com/server.PHP (非跨域) http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)

AJAX跨域实现

原理:在同域中建立一个用于请求 别的域的代理程序,并将返回的内容发给客户端,客户端指向同域的这个代理程序 1. 客户端编写 // 其它部分都一样 //2.注册回调方法 callback xmlhttp.onreadystatechange = callback; //获取客户端内容 var userName = document.getElementById("UserName").value; //进行编码解决 中文乱码 userName = encodeURI(encodeURI(

1.NET Core Web Api跨域问题

官方说明 CORS means Cross-Origin Resource Sharing. Refer What is "Same Origin" Part Detailed Procedure 具体实践 需要引入 Microsoft.AspNetCore.Mvc.Cors 包 Cors配置 Startup.cs文件ConfigureServices方法中,将Cors服务放到容器中 services.AddCors(options); 传一个options,指定名字并配置它,这个时候

跨域问题解决方案

一.跨域问题存在的原因 二.跨域解决对比 JSONP对比CORS jsonp和cors都能解决 Ajax直接请求普通文件存在跨域无权限访问的问题 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS 三.CORS跨域解决方案 1.普通Servlet跨域问题解决 http:/

说一说javascript跨域和jsonp

同源策略 在浏览器的安全策略中“同源策略”非常如雷贯耳,说的是协议.域名.端口相同则视为同源,域名也可换成IP地址,不同源的页面脚本不能获取对方的数据. 要是想使用XMLHttpRequest或者常规的AJAX请求获取另一个站点的数据,浏览器会告诉你“XXXX is not allowed by Access-Control-Allow-Orign”. 因为同源策略的存在,防止了跨域访问的安全问题,但同时也损失了方便获取资源的便利. 跨域的src属性 世事又非绝对,浏览器还是允许几个元素跨域访问

iframe跨域访问

js跨域是个讨论很多的话题.iframe跨域访问也被研究的很透了. 一般分两种情况: 一. 是同主域下面,不同子域之间的跨域: 同主域,不同子域跨域,设置相同的document.domian就可以解决; 父页访问子页,可以document.getElementById("myframe").contentWindow.document来访问iframe页面的内容:如果支持contentDocument也可以直接document.getElementById("myframe&