进阶13:跨域的一些方法

什么是同源策略

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。它是由Netscape提出的一个著名的安全策略
现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面。当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。

什么是跨域?跨域有几种实现形式

跨域允许不同域的接口进行交互
跨域有几种实现形式

  • JSONP
  • CORS
  • 降域
  • postMessage

JSONP 的原理是什么

JSONP(JSON with padding)填充式JSON,JSONP主要由回调函数和数据(传入回调函数的JSON数据)组成,因为浏览器允许跨域资源嵌入,所以JSONP是通过在页面内动态地添加<script>,为标签内src添加一个跨域URL,其中包含在之前声明好的回调函数(?callback=回调函数名),当JSONP响应加载完毕以后,则会立即执行。

  • 缺点:
    1. 不能确保从其它域中加载的代码中是否含有恶意代码。
    2. 确定JSONP请求是否失败并不容易(HTML5中为script元素添加的oneerror事件处理程序并没有得到任何浏览器支持)

CORS是什么

CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 ajax 跨域请求资源的方式,支持现代浏览器,IE支持10以上。 实现方式很简单,当你使用 XMLHttpRequest 发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。

几种跨域的解决方式

https://github.com/a625689014/cross-domain

推荐阅读更多精彩内容

  • 前言:对于跨域请求,很早之前就有去了解过,但因为一直关注的都是服务器后端开发,故也就仅仅停留在概念的理解上而没有机...
    ken_ljq阅读 65,365评论 4 102
  • 一、浏览器的同源策略 1.什么是同源? 所谓“同源”指的是”三个相同“。相同的域名、端口和协议,这三个相同的话就视...
    徐国军_plus阅读 587评论 1 3
  • 1.什么是同源策略浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不...
    24_Magic阅读 243评论 0 0
  • 跨域是什么 同源策略 在讲解什么是跨域之前先要清楚什么是同源策略,“同源政策”(same-origin polic...
    JRG_Orange阅读 608评论 0 52
  • 这个题目化用了一句苏轼的词“起舞弄清影,何似在人间”,又借用了陶渊明非常有名的“采菊东篱下,悠然见南山”诗中的一句...
    简之宁阅读 1,439评论 21 50