html5跨域,本地html跨域问题

html5 localstorage 支持跨域吗

LocalStorage是不能跨域的，但是，可以借助postMessage和iframe来实现跨域的数据读取。参考 iframe实现跨.

相关问答

Q1: 前端跨域解决方案有哪些

处理跨域方法一——JSONP

1.JSONP原理

利用script元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。

2.JSONP和AJAX对比

JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX属于同源策略，JSONP属于非同源策略（跨域请求）

3.JSONP优缺点

JSONP优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性。

4.JSONP的流程(以第三方API地址为例，不必考虑后台程序)

声明一个回调函数，其函数名(如fn)当作参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据(服务器返回的data)。

创建一个

服务器接收到请求后，需要进行特殊的处理：把传递进来的函数名和它需要给你的数据拼接成一个字符串,例如：传递进去的函数名是fn，它准备好的数据是fn([{“name”:“jianshu”}]）。

最后服务器把准备的数据通过HTTP协议返回给客户端，客户端再调用执行之前声明的回调函数（fn），对返回的数据进行操作。

处理跨域方法二——CORS

1.CORS原理

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

2.CORS优缺点

CORS要求浏览器(IE10)和服务器的同时支持，是跨域的根本解决方法，由浏览器自动完成。

优点在于功能更加强大支持各种HTTP Method，缺点是兼容性不如JSONP。

处理跨域方法三——WebSocket

Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。

原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

处理跨域方法四——postMessage

如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。HTML5为了解决这个问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。

Q2: html5的跨域资源共享是什么意思

是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 它是一个妥协，有更大的灵活性，但比起简单地允许所有这些的要求来说更加安全。

Q3: web前端跨域的一些解决方案

没有归纳之前对跨域的一些说法是模糊的，什么jsonp啊，跨域原理啊，心里只有一个大概的说法，知道这个东西，然后用的时候直接百度Ctrl+C，后来闲下来决定整理一波这些知识点，需知其所以然。

那么，其实这是浏览器对我们的一种保护机制，把坏人挡在门外。那么，问题来了，我们怎么确定门外的人到底是好人还是坏人呢？浏览器关上了坏人的一扇门，留给了我们好人一扇窗。

JSONP跟JSON没有关系..就好像JavaScript和Java一样

浏览器对script、img（这些标签的请求方式都是 GET ，所以jsonp不支持 POST ）这种标签没有限制，我们就可以这样干

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

服务器端对于CORS的支持，主要就是通过设置 Access-Control-Allow-Origin 来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。 更多有关跨域资源共享 CORS 的知识

浏览器中可以查看对应的响应头，举个例子，如下

服务端允许CORS，服务端需要针对接口设置的一系列响应头 (Response Headers)

1.简单请求

目前大多数情况都采用这种方式。简单请求只需要设置 Access-Control-Allow-Origin 即可。满足以下两个条件，就属于简单请求。

2.非简单请求

非简单请求会发出一次预检测请求，返回码是204，预检测通过才会真正发出请求，这才返回200。来看栗子：

非简单请求需要根据不同情况配置不同的响应头，一系列响应头配置项见上方

这个说法相信不陌生，我们依然使用前端域名请求，然后有一个 中介商---代理 把这个请求转发到真正的后端域名上，那也就不存在跨域问题了。

比较普遍的Nginx，简单的配置一下就可以了。了解更多的配置信息： nginx详解

然后前端这边的请求地址是 ,然后Nginx监听到地址是 localhost:9099/api 的请求，就帮我们转发到真正的服务端地址

CORS与JSONP的使用目的相同，但是比JSONP更强大。JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及在服务端同意jsonp方式时，可以向不支持CORS的网站请求数据。Nginx可以说是最方便的，不过需要部署Nginx才行，需要对服务器有一定的理解，不太适合刚入门的同学，当然也可以请后台同学帮忙部署。

window.postMessage(data,origin) 是 HTML5 的一个接口，专注实现不同窗口不同页面的跨域通讯。

现在是这么一个情况,由于同源策略的限制下， a.html 不能操作iframe( b.html )里面的dom，那么使用postMessage就可以解决这一情况

然后 b.html 页面通过message事件监听并接受消息:

这种方式只适合主域名相同，但子域名不同的iframe跨域。

比如主域名是 ，子域名是 ，这种情况下给两个页面设置相同的document.domain即document.domain = baidu.com 就可以访问各自的window对象了。

前端跨域整理

不要再问我跨域的问题了

Q4: 如何使用html5 PostMessage解决iframe完全跨域的问题

这个问题可以通过html5引入的message的API来解决，可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。具体使用可以在网上查找。

Q5: 跨域产生的原因和解决方法

因为浏览器的同源政策，就会产生跨域。比如说发送的异步请求是不同的两个源，就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑，就会产生一个同源政策，不是同一个地方出来的是不允许进行交互的。

解决跨域的方法：

1、通过jsonp跨域。

2、通过修改document.domain来跨子域。

3、使用window.name来进行跨域。

4、使用HTML5中新引进的window.postMessage方法来跨域传送数据。

5、使用代理服务器，使用代理方式跨域更加直接，因为同源限制是浏览器实现的。如果请求不是从浏览器发起的，就不存在跨域问题了。

跨域的特点：

1、跨域只存在于浏览器，不在浏览器发请求是不会存在跨域问题的。

2、跨域是出现在ajax请求中，普通请求不会。

3、所有的跨域，都必须经过服务端的允许和配合，未经server端的允许和配合就实现跨越，说明浏览器有漏洞，不安全。

以上内容参考  百度百科-跨域网络