html5跨域postmessage，web页面跨域调用restful api手段

跨域请求是什么?

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

广义跨域就是指跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制 解决办法：JSONP：使用方式就不赘述了，但是要注意JSONP只支持GET请求，不支持POST请求。

相关问答

Q1: IE是否支持html5的postmessage()跨域传值

1、window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的。

2、跨域 post 的话，IE8 及以上和其他主流浏览器可以用 window.postMessage 来实现，也就是传说中的 HTML5 方法了，可以看下标准，代码很简单。

3、window.postMessage(message，targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

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

Q2: H5中怎样使用postMessage实现两个网页间传递数据

这里首先想到就是把h5页面用iframe内嵌到pc网页中，然后pc通过postMessage方法，把变化的数据发送给iframe，iframe内嵌的h5通过addEventListener接收数据，再对数据做响应式的变化。

window对象有一个postMessage方法。正确使用时，能安全的实现两个不用浏览器标签页通信。现实中打开一个新标签窗口到完成渲染是需要一定的时间的，如果过早使用了postMessage方法，onmessage会无法监听到数据。

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

往往使用动态网页技术制作asp应用程序时一般至少拥有二个或二个以上的web页面，这时就得考虑在多个web页面间传递数据的处理工作。

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

解决方案：js向服务器发送请求，然后让服务器去另一个域上获取数据后返回。（用于你无法控制另一个域） 比如php中利用cUrl。放置跨域文件.用JSONP。虽然不能跨域进行通信，但是可以引入跨域的js文件。

跨域问题产生的原因，是由于浏览器的安全机制，JS只能访问与所在页面同一个域（相同协议、域名、端口）的内容（参考js的同源策略）。

nginx用来解决跨域问题的原理与 前端非正统解决方式 的 proxy 的思路是一致的。项目请求接口由nginx服务发出，获取到的数据再经由nginx传递给前端项目，这样前端的请求其实都是由nginx处理的，就没有跨域发生了。

场景：前后端分离，页面和后端项目部署在不同服务器，出现请求跨域问题。

Q4: 前端postMessage和addEventListener踩坑

页面一跨域open页面二，页面二通过addEventListener监听到消息后，返回确认信息。页面一通过addEventListener监听页面二发送的确认信息后，将数据包发送给页面二。页面二获取数据包后进行处理。

但当次页面重复几次进入并操作时，页面就会卡死，cpu的占用也急剧升高。在排查了一天之后终于找到了原因：原来是这个页面之中注册了一个addEventListener事件，用来监听document的点击事件，从而对用户的点击做出一些反馈。

这里首先想到就是把h5页面用iframe内嵌到pc网页中，然后pc通过postMessage方法，把变化的数据发送给iframe，iframe内嵌的h5通过addEventListener接收数据，再对数据做响应式的变化。

html5跨域postmessage的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于web页面跨域调用restful api手段、html5跨域postmessage的信息别忘了在本站进行查找喔。