前端跨域问题总结(1)

2.Ajax请求

$.ajax({
    url: 'http://www.example.com',
    type: 'get',
    dataType: 'jsonp',
    jsonpCallback: 'onCallback',
    data: {}
})

3.CROS方式

Cross-Origin Reasource Sharing 跨域资源共享可以避开浏览器的同源策略，但CROS不仅仅支持GET请求，还支持其他请求

方式：

在服务器的返回信息里对请求头进行设置：

1. Access-Control-Allow-Origin => *
2. Access-Control-Allow-Headers => X-Requested-With
3. Access-Control-Allow-Methods => PUT, POST, GET, DELETE, OPTIONS

4.Document.domain + iframe

条件：

页面 http://www.example.com/a.html

页面中有一个iframe http://iframe.com/b.html

方式：

将两个页面的document.domain 设置成相同的域名，就可以在页面中拿到iframe中的数据

限制：

只能把document.domain设置成自身或更高一级的父域

实现：

//a.html
document.domain = 'example.com';
var iframe = document.createElement('iframe');
iframe.src = 'http://iframe.com/b.html';
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.onload = function() {
    var doc = iframe.contentDocument || iframe.contentWindow.document;
    console.log(doc)
}

//b.html
document.domain = 'example.com';

5.window.postMessage()

HTML5的新特性，允许来自不同源的脚本采用异步方式进行通信，实现跨域传递消息

使用方法：

postMessage(data, origin)

data: html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化

origin: 协议+主机+端口号，也可以设置为"*“，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为”/"

实现

// http://www.example.com/a.html
<iframe src="http://www.example2.com/b.html" style="display: none;" id="ifr"></iframe>
<script>
	var iframe = document.getElementById('ifr');
	iframe.onload = function() {
        var data = {};
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.example2.com');
	};
	
	// 接受传输的数据
	window.addEventListener('message', function(e) {
    	console.log(e.data);
	}, false);
</script>

// http://www.example2.com/b.html

<script>
    window.addEventListener('message', function(e) {
    	console.log(e.data);
	})    
</script>

6.window.name + iframe

原理：window.name 在不同的页面加载后依然存在，最大为2M

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    [外链图片转存中…(img-aXD33kap-1714627713745)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666