前端面试之同源和跨域的示例分析

这篇文章将为大家详细讲解有关前端面试之同源和跨域的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联专注于企业成都全网营销、网站重做改版、秀峰网站定制设计、自适应品牌网站建设、H5建站、商城开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为秀峰等各大城市提供网站开发制作服务。

什么是同源策略

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

何谓同源

如果协议、域名和端口对于两个页面来说是相同的，则这两个页面就是同源的。比如：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是客户端与服务端跨域通信的常用的方法。利用可以跨域的服务器请求json数据，服务端收到请求后，将数据放在一个回调函数中传回来。实现如下：

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是持久存在一个窗口载入过的所有页面中的。显然，这是可以实现跨域访问的。

关于“前端面试之同源和跨域的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。