跨域

其实作为前端开发，现在项目中很少用这个的，跨域多数是后台解决的，但是少用不等于100%不用，还是要了解一下，以下案例场景都是本人实际项目中的。

概念理解：

所谓跨域，指http请求资源的url地址里的协议、域名、端口号与本页面的不同（3个有一个不同都称为跨域）。

造成原因：

浏览器同源策略限制导致的，它是浏览器最核心也最基本的安全功能。

解决方法：

1.window.postMessage（亲测它不能传递函数，传对象、字符串可以）

它可用于解决以下方面的问题：

• 页面和其打开的新窗口的数据传递
• 多窗口之间消息传递
• 页面与嵌套的iframe消息传递

业务场景分析：

VUE3.0项目中有一个A页面操作下一步需要跳转到B页面签约操作，操作成功后再自动跳回到A页面，由于已经有别的项目写好的B页面了，不想再重复写一遍，此时想到的是用ifram标签嵌套（很老的框架）把B页面嵌入到本页面中，使用v-if控制ifram标签的显隐，B页面操作成功后返回消息为true。

案例：

A窗口：

<iframe v-if="iframeState" id="iframe" frameborder=0 name="showHere" scrolling="auto" :src="signURL" />

            window.addEventListener('message',function(){                
                state.iframeState = false;
                window.history.back()
            },false)

B窗口：

window.parent.postMessage（{msg:true}，*）

优化功能：

因为始终是在同一个路由下，需要监听用户点击左上角的返回事件，在这里就不详谈了）

            if (window.history && window.history.pushState) {
                history.pushState(null, null, document.URL);
                window.addEventListener('popstate', iframeStateFalse, false);
            }

关键代码：

发送方：window.parent.postMessage（{msg:true}，*）

接收方：window.addEventListener('message',function(e){}备注：

2.fetch-jsonp

十一个第三方插件，缺点是只支持get请求，不支持post请求。

官方文档地址：https://github.com/camsong/fetch-jsonp；

下载：npm install fetch-jsonp

引入：import  fetchJsonp from"fetch-jsonp"

调用：

3.webpack的devServer配置proxy

只是本地调试使用，打包后就不读devServer，个人理解这个还不如通过vue的.env环境配置来更改axios的baseURL更直接。

以上只是我常用到过的，还有其他别的方法（document.domain，cors,websocket），以后再更新。