前端跨域问题总结(2)

浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本（如 JavaScript）对不同域的服务进行跨站调用。

一般的，只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用。

同源策略会限制以下几种行为：

1. Cookie, LocalStorage和IndexDB无法获取
2. DOM 和 JS 对象无法获取
3. AJAX请求无法发送

常见的跨域类型包括以下一些：

URL	说明	是否允许通信
http://www.example.com/a.jshttps://www.example.com/b.js	不同协议	不允许
http://www.example1.com/a.jshttp://www.example2.com/b.js	不同域名	不允许
http://www.example.com/a.jshttp://192.168.1.1/b.js	域名与域名所对应的IP	不允许
http://www.example.com/a.jshttp://x.example.com/b.jshttp://example.com/c.js	主域相同，子域不同	不允许
http://www.example.com:8080/a.jshttp://www.example.com/b.js	同个域名，不同端口	不允许
http://www.example.com/a.jshttp://www.example.com/b.jshttp://www.example.com/lab/c.js	同域名同端口，不同文件目录	允许

跨域问题解决方案

1. jsonp
2. Ajax
3. CORS
4. document.domain + iframe
5. window.postMessage()
6. window.name + iframe
7. nginx 代理

1.jsonp跨域

原理：动态生成一个script标签，插入head中，浏览器会执行script标签中的代码，但只能实现get请求

具体原生实现

<script>
	var script = document.createElement('script');
	script.type = 'text/javascript';
	
	script.src = 'http://www.example.com?name=michael&callback=onCallback';
	document.head.appendChild(script);
	
	function onCallback(res) {
        console.log(JSON.stringify(res));
        // 在这里处理数据
	}
</script>

// 服务端返回，返回后执行onCallback函数
onCallback({resultCode: 0, data: {}});

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


### 文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。



这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



**269页《前端大厂面试宝典》**

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/b98713ee557d94286de8afe404cb51d1.png)

**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/1d691ca297c9016828aff783a701e065.png)