前端面试必备之同源和跨域详解

前言

众所周知浏览器的同源策略及跨域的方法在前端面试中也是出场率极高的问题，本文主要跟大家分享了关于前端面试时会遇到的同源和跨域问题，下面话不多说了，来一起看看详细的介绍吧。

什么是同源策略

同源策略是用来限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互，是一种用于隔离潜在的恶意文件的关键的安全机制。

何谓同源

如果协议、域名和端口对于两个页面来说是相同的，则这两个页面就是同源的。比如：http://www.hyuhan.com/index.html 这个网站，协议是http，域名是www.hyuhan.com，端口是80(默认端口)，它的同源情况如下：

• http://www.hyuhan.com/other.html：同源
• http://hyuhan.com/other.html：不同源（域名不同）
• https://www.hyuhan.com/other.html：不同源（协议不同）
• http://www.hyuhan.com:81/other.html：不同源（端口不同）

同源策略是为了保护用户信息的安全，受到同源策略限制的主要有以下几种行为：

1. Cookie、LocalStorage和IndexDB无法读取
2. DOM无法操作
3. AJAX请求不能发送

如何进行跨域访问

怎么跨域进行AJAX请求

主要由三种方法可以绕过同源策略的限制，来进行跨域的AJAX请求。

JSONP

JSONP是客户端与服务端跨域通信的常用的方法。利用可以跨域的

window.onload = function() {
    var script = document.createElement('script');
    script.src = "http://example.com/callback=test";
    document.appendChild(script);
}
function test(res) {
    console.log(res);
}

src的callback参数是用来设置后端需要调用的回调函数的名字的，服务器返回的数据如下：

test({
    "name": "小明",
    "age": 24
    })

这样，前端就能跨域读取后端的数据了。但是jsopn只能发生get请求，不能发送post请求。

WebSocket

WebSocket是一种基于TCP的新的网络协议，它不实行同源策略，只要服务器支持，就可以进行跨域访问。而且WebSocket并不限于以Ajax方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息。

CORS

CORS是Access-Control-Allow-Origin（跨域资源共享）的缩写，它是一个W3C的标准。CORS需要浏览器和服务器同时支持，目前基本所有的浏览器都支持该功能。服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

document.domain

Cookie是服务器写入浏览器的信息，安全起见，只有同源的网页才能共享。但是，如果两个网页的一级域名相同，但是耳机域名不同的话，可以通过设置document.domain来共享Cookie。

比如，一个网页域名是http://w1.example.com/a.html ，另一个网页域名是http://w2.example.com/b.html ，只要给们设置相同的document.domain，这两个网页就可以共享Cookie。

postMessage API

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文档、多窗口、跨域消息传递。用postMessage()函数传递消息，目标页面监听window的message事件接收消息。利用postMessage，我们可以跨域读取LocalStorage和IndexDB还有DOM数据。

window.name

浏览器窗口有window.name的属性，该属性规定无论是否同源，只要在一个窗口里，前一个网页设置了这个属性，后一个网页就可以读取它。即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的。显然，这是可以实现跨域访问的。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对潘少俊衡的支持。