前端面试:同源策略和跨域

前端面试:同源策略和跨域

知识点

什么是同源

同源指的是两个URL的协议、域名、端口号都相同,则两个页面具有相同的源。

http://www.test.com/80/index.html中,http:是协议名,//www.test.com/是域名,/80/是端口号

  • http://www.test.com/80/index.htmlhttp://www.test.com/main.html同源。端口号不显示则默认为80端口index.htmlmain.html为网页名

  • http://www.test.com/80/index.htmlhttp://www.test.com/80/main.html同源。

  • http://www.test.com/80/index.htmlhttps://www.test.com/main.html不同源。协议名不一致

  • http://www.test.com/80/index.htmlhttp://www.user.com/index.html不同源。域名不一致

  • http://www.test.com/80/index.htmlhttp://www.test.com/7990/main.html不同源。端口号不一致

什么是同源策略

同源策略(Same origin policy)浏览器提供的一种安全策略功能。(目的:隔离潜在的恶意文件,提供安全)

MDN官方给出的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制

其实,这话和没说一样,同样的中文,但是组织起来,却不理解

通俗讲,就是浏览器限制不是同源的网站进行交互,不是同源说明协议名、域名、端口号其中任意一个不一致,同源策略相当于给网页交互上了一层隐形的墙

什么是跨域

两个URL的协议名、域名、端口号其中任意一个不一致,则叫跨域

  • http://www.test.com/80/index.htmlhttps://www.test.com/main.html跨域。协议名不一致
  • http://www.test.com/80/index.htmlhttp://www.user.com/index.html跨域。域名不一致
  • http://www.test.com/80/index.htmlhttp://www.test.com/7990/main.html跨域。端口号不一致
出现跨域的根本原因

浏览器的同源策略不允许非同源的URL之间进行资源的交互

浏览器对跨域请求的拦截

如图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传前端面试:同源策略和跨域_第1张图片

  1. 浏览器允许发起跨域请求
  2. 浏览器能接收到服务器响应的数据
  3. 但首先会被浏览器的同源策略所拦截,不会直接把数据交给浏览器的ajax请求中,则服务器响应的数据无法被页面获取

就比如皇帝(浏览器A)住在乾清宫发圣旨,皇后(服务器B)接到命令,立马传回去,不过皇帝身份比较高贵,需要通过太监(同源策略)来拦截收到的信息,然后再统一传给皇帝

浏览器如何实现跨域数据请求

两种方式:

JSONP:只支持GET,不支持POST请求

CORS:GET、POST都支持,官方跨域ajax请求的根本解决方案

什么是JSONP

通过

你可能感兴趣的:(js,javascript,ajax)