a标签在同源html中跳转,前端面试必备之同源和跨域详解

前言

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

什么是同源策略

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

何谓同源

如果协议、域名和端口对于两个页面来说是相同的，则这两个页面就是同源的。比如：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是客户端与服务端跨域通信的常用的方法。利用可以跨域的

var script = document.createEl