笔者目前主要使用Vue进行项目开发,但是我认为技术栈不重要,js才是最重要的,当时css优秀也是一名优秀的前端小开发(咳咳),下边步入正题啦
一、跨文档通信API
唠嗑:我认为还是比较常常使用的 尤其是对于项目嵌入iframe和open简直不要太好用,哈哈哈哈,咳咳,写文章呢,严肃点
(1) 使用vue-router(push)跳转如何使用(这个其实不能算作跨域)
父页面
//父页面添加message监听子页面发送来的消息
window.addEventListener('message', function (e) {
//自己打印出来e就可以具体都有哪些值了
//我比较常用的就是 e.data = {msg:"你好哇"}
}, false);
子页面
//子页面使用postMessage发送数据给父页面进行相关的判断
window.parent.postMessage({
msg:"你好哇"
}, '*');
(2) 使用open打开子页面
const openChildWindow = window.open('http://**.**.**.**:8080/#/mypage');
//需要在加载成功后在发送消息 此时子页面已经绑定好监听事件了呢,不然可能会接收不到
openChildWindow.onload = () => {
openChildWindow.postMessage('hello word', 'http://**.**.**.**:8080/')
}
(3) iframe
唠嗑:主要使用的是获取嵌套的iframe的dom- 然后通过contentWindow进行postMessage发送消息-监听message接收消息
var myframe = document.getElementById('myframe');
myframe.contentWindow.postMessage({data:'parent'}, 'http://localhost:8081');
二、jsonp
jsonp是利用资源不跨域的特性,使用的是script标签的src属性,因此只能get请求
三、前端不做修改-需要服务端配置头部等
Access-Control-Allow-Origin: *
//代表服务器同意把Cookie发到服务器
Access-Control-Allow-Credentials: true 还要给ajax请求设置withCredentials=true
四、vue框架跨域
本地联调阶段使用-在vue.config.js中-devServer进行代理配置 (webpack配置)