浏览器(跨域)

浏览器主要组成部分：
用户界面：包括地址栏、前进后退按钮、书签菜单等。除了浏览器主要窗口显示的您的请求页面外，其他现实的各个部分都属于用户界面

浏览器引擎：在用户界面和呈现引擎之前传送指令

渲染引擎：负责显示请求的内容。如果请求的内容是HTML,它就负责解析HTML和CSS内容，并将解析后的内容显示在屏幕上

网络模块：用于网络调用，比如HTTP请求，其接口与平台无关，并为所有平台提供底层实现。

用户界面后端：用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。

javascript解析器：用于解析和执行javascript代码

数据存储模块：这是持久层，浏览器需要在硬盘上保存各种数据，例如cookie sessionstorage localstorage

同源策略是一个重要的安全策略，它用于限制一个origin（源）的文档或者它加载的脚本如何能与另一个源的资源进行互换。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

如果两个URL的protocol、port、和host都相同（协议、端口、主机一致为同源），则这两个URL是同源

当一个请求的URL的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

解决跨域

原理：利用

优点：JSON优点是简单兼容性好,可以解决主流浏览器的跨域数据访问问题

缺点：仅支持get方法具有局限性，不安全可能会遭受xss攻击

postMessage是HTML XMLHttpRequest Level2中的API，且是为数不多的可以快于操作window属性之一，它可以用以解决以下方面的问题
1、页面和其他打开的新窗口的数据传递
2、多窗口之间的消息传递
3、页面与嵌套的iframe消息传递

//向引用的父页面传递消息
window.parent.postMessage({
                data: {
                    code:"success",
                    test:h5Url
                }
            }, '*')
//在父页面进行监听
window.addEventListener('message', this.getIframUrl);
//event子iframe传来的data参数
getIframUrl(event){
          const data = event.data.data
          let _this = this
          if(data.code == "success"){
              console.log(data.test)
              var url = data.test
              var codes = (this.getCode(url,'code'))
              this._saveAuthInfo(codes)
          } 
      },

4、上面三个场景的跨域数据传递

需要搭建一个中转nginx服务，用于转发请求

server: {	
	listen: 88;
	server_name: www.imooc.com;
	"location/":{
		proxy_pass: 'http://www.domain2.com:8080'
	}
}