同源策略禁止读取位于_web面试同源和跨域详解

前言

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

同源

1.同源的概念

同源(也叫同源策略)，是浏览器中的一种安全机制

2.同源的规则

同源指‘三个相同’，协议相同，域名相同，端口号相同(简单来说，就是同一个网站)

http://www.zs.com/8088

http://www.zs.com/80 端口号不同

http://www.ls.com/8088 域名不同

https://www.zs.com/8088 协议不同

3.同源的目的

是为了保护用户信息的安全，防止恶意网站窃取信息

4.同源策略的限制范围(也就是不同源的情况)

cookie,localStorage,IndexDB无法读取

DOM无法获取

ajax请求不能发送(并不是说请求不能发送了，而是在请求的过程中被拦截了)

注意点：同源机制的判断时机：

发送ajax请求时，不判断两个页面是否同源(可以发送请求)

浏览器也可以接收到后台响应的内容(能接收响应)

接收到响应后，浏览器才会根据同源策略判断响应内容的页面和当前页面是否是同源的，如果是同源的，请求发送成功；否则就拦截

如何进行跨域访问

怎么跨域进行AJAX请求

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

JSONP

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