Vue实战篇-跨域问题解决方案(CORS)

原文http://www.cnblogs.com/loveis715/p/4592246.html

名词解系

同源策略:(https://segmentfault.com/a/1190000015597029)

那么什么是Same-origin Policy呢?简单地说,在一个浏览器中访问的网站不能访问另一个网站中的数据,除非这两个网站具有相同的Origin,也即是拥有相同的协议、主机地址以及端口。一旦这三项数据中有一项不同,那么该资源就将被认为是从不同的Origin得来的,进而不被允许访问。

OPTIONS:用于获取目的资源所支持的通信选项,在从一个域向另一个域发起请求的时候,会先发送一个options后端来验证是否允许请求通过。

CORS简介

  现在请跟我做:在您的浏览器的地址栏中输入www.yhd.com并敲击回车。在网站内容全部加载完毕后,按F12打开浏览器的调试窗口。当切换到Sources页时,您会发现您当前所看到的一号店的页面是从多个不同的域中得到的:

  或许有些读者会感到奇怪:在之前自己 写网页的时候就曾经尝试访问非当前域中的资源,却怎么也不成功,一号店是如何做到的?

  当然,这不是一号店的独门绝技,而仅仅是使用了一些跨域访问的技术而已。而在本文中,我们就将对一种跨域访问技术CORS(Cross-Origin Resource Sharing)进行介绍。

为什么要用CORS

  在需要做出一个技术决定时,我们常常需要给出适当的理由。就CORS而言,使用它的根本原因就是要完成资源的跨域访问,也就是如何绕过Same-origin Policy。

  那么什么是Same-origin Policy呢?简单地说,在一个浏览器中访问的网站不能访问另一个网站中的数据,除非这两个网站具有相同的Origin,也即是拥有相同的协议、主机地址以及端口。一旦这三项数据中有一项不同,那么该资源就将被认为是从不同的Origin得来的,进而不被允许访问。

  但是这个限制的确过于严格了:一个大型网站常常拥有一系列子域。在这些域之间交换数据就会受到Same-origin Policy的限制。为了绕过该限制,业界提出了一系列解决该问题的方法,例如更改document.domain属性,跨文档消息,JSONP以及CORS等。这些解决方案各有各的长处,因此我们需要根据需求的不同来对这些方案进行选择。

  可以说更改document.domain属性的方法是最为直接快速的的方法,也较为常见。通过将从不同域中得到的脚本的document.domain属性设置为同一个值,就可以使得这些脚本之间可以相互交互。例如从“http://blog.ambergarden.com”得到的网页可以通过执行如下的脚本改变其document.domain属性中记录的所属域:

1 document.domain = ‘ambergarden.com’;

  那么接下来,该脚本就可以访问ambergarden.com中的数据了。

  这种方法也有其自身的劣势,那就是软件开发人员不可以随便设置document.domain属性的值,至少在一些浏览器上是如此的。

  跨文档消息则是通过向Window实例发送消息来完成的。在使用时,软件开发人员需要通过调用一个Window的postMessage()函数来向该Window实例发送消息。此时Window实例内部的onmessage事件将被触发,进而使得该事件的消息处理函数被调用。但是在接收到消息的时候,消息处理函数首先需要判断消息来源的合法性,以避免恶意用户通过发送消息的方式来非法执行代码。

  JSONP则是通过在文档中嵌入一个

你可能感兴趣的:(WEB基础,Vue)