前端跨域的几种解决方式总结

同源策略

JavaScript的同源策略,是由Netscape提出的一个著名的安全策略,为了阻止A站的JS去操作别的网站的数据。你想啊,你现在打开了浏览器,在一个tab窗口中打开了银行网站,在另外一个tab窗口中打开了一个恶意网站,而那个恶意网站挂了一个专门修改银行信息的JavaScript,当你访问这个恶意网站并且执行它JavaScript时,你的银行页面就会被这个JavaScript修改(比如说获取你的卡号和密码,又或者是转账到黑客的账户上等等),后果会非常严重!而同源策略就为了防止这种事情发生,它规定了A网站下的JS文件只能操作A网站下的数据,不能去操作B网站的数据。

为了方便理解,我们把这个词拆分成同源和策略这2个词吧。

所谓同源指的就是资源是来自同一个源的。如果两个页面拥有相同的协议,端口号,和主机(包括子域名和主域名),那么这两个页面就属于同一个源。

所谓策略指的是可以做什么事情。同一个源下的JS可以操作同一个源下的数据。

举个例子来看看你理解了没有吧,看下面这个链接,协议是http协议,主机是store.company.com,端口号一般默认的都是80了。然后和下面的这个表中的各个URL进行比较,判断一下那些是同源的,那些是不同源。

URL
  1. http://store.company.com/dir2/other.html
  2. http://store.company.com/dir/inner/another.html
  3. https://store.company.com/secure.html
  4. http://store.company.com:81/dir/etc.html
  5. http://news.company.com/dir/other.html

什么是跨域

跨域

跨域
  • 一个域名地址的组成:

http://www.abc.com:8080/scripts/jquery.js

http:// 协议

www 子域名

.

abc.com 主域名

:

8080 端口号

/

scripts/jquery.js 请求资源地

跨域的解决方案

方案1 - JSONP

JSONP是JSON with padding的简写。JSONP由两部分组成:回调函数和数据。

回调函数是客户端和服务端约定好一个函数名,一般在请求中指定。

数据是传入回调函数中的JSON数据。

JSONP是通过动态的

callback({“name”: “michael”});

问题一:JSONP是需要动态创建script标签的,我们需不需要处理这些script元素?怎么处理?

问题二:JSONP请求的时候,服务器发生错误该怎么办,比如服务器崩掉,比如返回了404页面,前端该怎么处理这个错误,难道直接让它抛出么?

答案

JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求

JSONP的兼容性好,不需要XMLHttpRequest的支持

方案2 - 跨域资源共享CORS

跨域资源共享定义了在必须访问跨域资源的时,浏览器与服务器应该如何沟通。他的原理是使用自定义的HTTP头部,让服务器与浏览器进行沟通,主要是通过设置响应头的Access-Control-Allow-Origin来达到目的的。

当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时,资源会发起一个跨域HTTP请求。

比如,站点http://domain-a.com的某HTML页面通过的src请求http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表,图像和脚本等资源。

出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求。例如,XMLHttpRequest和Fetch API遵循同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源,除非使用CORS头文件

跨域资源共享(CORS)机制允许Web应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行。浏览器支持在API容器中(例如XMLHttpRequest或Fetch)使用CORS,以降低跨域HTTP请求所带来的风险。

跨域资源共享标准新增了一组HTTP首部字段,允许服务器声明那些源站有权限访问那些资源。另外,规范要求,对那些可能对服务器数据产生副作用的HTTP请求方法(特别是GET以外的HTTP请求,或者搭配某些MIME类型的POST请求),浏览器必须首先使用OPTIONS方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的HTTP请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括Cookies和HTTP认证相关数据)。

方案3-documnet.domain

浏览器的同源策略使得不同域的框架是不能进行JS的交互操作的。比如:有一个页面是http://www.examples.com/a.htmls,在这个页面中还有一个http://examples.com/b.htmls,很显然,a.html与b.html是不同域的,所以我们无法通过在页面中书写js代码来获取iframe中的东西,但是,如果我们把这2个页面的document.domain都设置成相同的域名就可以了,需要注意的是,我们只能把document.domain设置成自身或更高一级的父域,且主域名必须相同。

使用条件

document.domain适用于不同子域的框架之间的交互。

方案4-window.name

window对象有个name属性,该属性有一个特征:即在一个窗口的生命周期内,窗口载入的所有页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的。

方案5-window.postMessage

window.postMessage(message,targetOrigin)方法,可以用来向其他的window对象发送消息,无论这个window对象是属于同一个源还是不同源