首页 / 面试 / 前端面试之同源和跨域详情介绍
前端面试之同源和跨域详情介绍
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了前端面试之同源和跨域详情介绍，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3185字，纯文字阅读大概需要5分钟。
内容图文
跨域是由浏览器的同源策略引起的，是指页面请求的url地址，必须与浏览器上url地址处于同域上（即域名，端口，协议相同），下面这篇文章就来给大家介绍了关于前端面试必备之同源和跨域的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。前言
众所周知浏览器的同源策略及跨域的方法在前端面试中也是出场率极高的问题，本文主要跟大家分享了关于前端面试时会遇到的同源和跨域问题，下面话不多说了，来一起看看详细的介绍吧。
什么是同源策略
同源策略是用来限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互，是一种用于隔离潜在的恶意文件的关键的安全机制。
何谓同源
如果协议、域名和端口对于两个页面来说是相同的，则这两个页面就是同源的。比如：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：不同源（端口不同）
同源策略是为了保护用户信息的安全，受到同源策略限制的主要有以下几种行为：
Cookie、LocalStorage和IndexDB无法读取
DOM无法操作
AJAX请求不能发送
如何进行跨域访问
怎么跨域进行AJAX请求
主要由三种方法可以绕过同源策略的限制，来进行跨域的AJAX请求。
JSONP
JSONP是客户端与服务端跨域通信的常用的方法。利用可以跨域的<script&bt;元素，向服务器请求json数据，服务端收到请求后，将数据放在一个回调函数中传回来。实现如下：
src的callback参数是用来设置后端需要调用的回调函数的名字的，服务器返回的数据如下：
这样，前端就能跨域读取后端的数据了。但是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是持久存在一个窗口载入过的所有页面中的。显然，这是可以实现跨域访问的。
以上就是前端面试之同源和跨域详情介绍的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的前端面试之同源和跨域详情介绍全部内容，希望文章能够帮你解决前端面试之同源和跨域详情介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。