JSONP、CROS和postMessage跨域

浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

跨域的方式：

JSONP

html中script标签可以引入其他域下的js，比如引入线上的jquery库。利用这个特性，可实现跨域访问接口。需要后端支持。

JSONP看起来和JSON差不多，只不过被包含在函数中调用中的JSON,就像下面这样：

callback({"name":"Jack"});

以请求高德API天气接口为例，本地调用高德API数据接口，通过动态

postMessage

由于同源策略的限制，JavaScript 跨域的问题，一直是一个颇为棘手的问题。HTML5 提供了在网页文档之间互相接收与发送信息的功能。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同源（域 + 端口号）的 Web 网页之间可以互相通信，甚至可以实现跨域通信。

要想接收从其他窗口发送来的信息，必须对窗口对象的 onmessage 事件进行监听，其它窗口可以通过 postMessage 方法来传递数据。

语法：
otherWindow.postMessage(message, targetOrigin);

otherWindow
其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。

该方法使用两个参数：第一个参数为所发送的消息文本，但也可以是任何 JavaScript 对象（通过 JSON 转换对象为文本），第二个参数为接收消息的对象窗口的 URL 地址，可以在 URL 地址字符串中使用通配符'*'指定全部地。

为了模拟本地跨域，我在hosts里添加了两个不同的域名：

127.0.0.1   a.com
127.0.0.1   b.com
127.0.0.1   c.com

在父页面里嵌入了一个子页面，调用postMessage方法向子页面发送数据。在子窗口监听onmessage事件，并显示到input框内。

父页面代码：

  
  


  
实现PostMessage实现跨域
  

    
  
  
  

子页面代码：

postMessage跨域

在进行跨域的时候，设置好hosts后，启用本地服务器后，打开a.com时需要加上端口号！！
即在地址栏输入：a.com:8080/a.html

因为访问网页时都是要通过IP地址及端口号进行访问的，平时我们经常打开的网页绝大多数是超文本传输协议，即http，不要求用户输入网页“http://”的部分。同样，“80”是超文本传输协议文件的常用端口号，因此一般也不必写明。一般来说用户只要键入统一资源定位符的一部分，比如"www.baidu.com"，此处的端口号是默认的80端口。

而我在本地启用的服务器需要访问8080端口，因此需要手动输入，如果不输入就无法正常访问。

不输入端口号情况