`

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则是通过在文档中嵌入一个<script>标记来从另一个域中返回数据。例如在页面中添加一个如下的<script>标记:

1 <script src="http://blog.ambergarden.com/someData?callback=some_func"/>

  该<script>标记会向http://blog.ambergarden.com/someData发送一个GET请求。在数据返回到客户端后,some_func()函数将会被调用。当然,这种方法拥有一个显著的缺点,那就是只支持GET操作。

  就如您刚刚看到的一样,上面所列出的各个方法各自有各自的缺点及局限性。而相较于这些方法,CORS则没有那么多工作需要去做,也没有那么多限制。因此在本文中,我们将主要对CORS进行讲解。

 

CORS运行流程

  现在我们就来看一个通过CORS来进行跨域访问的简单示例。假设ambergarden.com想从一个公有数据平台public-data.com中返回一些数据,那么在页面逻辑中,其可以通过下面的代码向public-data.com发送数据请求:

1 function retrieveData() {
2     var request = new XMLHttpRequest();
3     request.open('GET', 'http://public-data.com/someData', true);
4     request.onreadystatechange = handler;
5     request.send();
6 }

  在运行这段代码的之后,浏览器会向服务发送如下的请求:

1 GET /someData/ HTTP/1.1
2 Host: public-data.com
3 ......
4 Referer: http://ambergarden.com/somePage.html
5 Origin: http://ambergarden.com

  而一个支持CORS协议的服务可能会给出下面的响应:

1 HTTP/1.1 200 OK
2 Access-Control-Allow-Origin: http://ambergarden.com
3 Content-Type: application/xml
4 ......
5 
6 [Payload Here]

  这里有一个值得注意的响应头:Access-Control-Allow-Origin。该响应头用来记录可以访问该资源的域。在接收到服务端响应后,浏览器将会查看响应中是否包含Access-Control-Allow-Origin响应头。如果该响应头存在,那么浏览器会分析该响应头中所标示的内容。如果其包含了当前页面所在的域,那么浏览器就将知道这是一个被允许的跨域访问,从而不再根据Same-origin Policy来限制用户对该数据的访问。

  从整个访问数据的流程来看,用户所使用的跨域访问数据的脚本实际上和普通的访问同一个域中数据的脚本并没有什么不同。而不同的,仅仅是在响应中多了一个Access-Control-Allow-Origin响应头。

  是不是很简单?实际上我们展示的仅仅是最为简单的Simple Request的执行流程。而CORS则将导致跨域访问的请求分为三种:Simple Request,Preflighted Request以及Requests with Credential。

  如果一个请求没有包含任何自定义请求头,而且它所使用HTTP动词是GET,HEAD或POST之一,那么它就是一个Simple Request。但是在使用POST作为请求的动词时,该请求的Content-Type需要是application/x-www-form-urlencoded,multipart/form-data或text/plain之一。

  如果一个请求包含了任何自定义请求头,或者它所使用的HTTP动词是GET,HEAD或POST之外的任何一个动词,那么它就是一个Preflighted Request。如果POST请求的Content-Type并不是application/x-www-form-urlencoded,multipart/form-data或text/plain之一,那么其也是Preflighted Request。

  一般情况下,一个跨域请求不会包含当前页面的用户凭证。一旦一个跨域请求包含了当前页面的用户凭证,那么其就属于Requests with Credential。

  前面我们已经看过浏览器对Simple Request是如何进行处理的。那么接下来我们就来看看Preflight Request是如何执行的。相较于Simple Request,Preflight Request的运行流程则略为复杂一些。

  假设现在我们要向公有数据平台public-data.com写入一些数据,那么我们就需要发送一个POST请求:

复制代码
1 function sendData() {
2     var request = new XMLHttpRequest(),
3         payload = ......;
4     request.open('POST', 'http://public-data.com/someData', true);
5     request.setRequestHeader('X-CUSTOM-HEADER', 'custom_header_value');
6     request.onreadystatechange = handler;
7     request.send(payload);
8 }
复制代码

  在执行了该段代码之后,浏览器首先发出的请求将如下所示:

1 OPTIONS /someData/ HTTP/1.1
2 Host: public-data.com
3 ......
4 Origin: http://ambergarden.com
5 Access-Control-Request-Method: POST
6 Access-Control-Request-Headers: X-CUSTOM-HEADER

  可以看到,我们首先发送的并不是POST请求,而是OPTION请求。该请求还通过Access-Control-Request-Method以及Access-Control-Request-Headers标示了请求类型以及请求中所包含的自定义HTTP Header。实际上,它相当于向服务端询问访问资源的权限:“您好,我想向你这里发送数据,你看可以吗?”。而在真正访问资源前发送一个请求进行探测也是该请求被称为是Preflight Request的原因。

  在服务端看到该OPTIONS请求后,其将分析该请求中的内容并返回一个响应,以通知浏览器是否允许向它发送数据:

1 HTTP/1.1 200 OK
2 Access-Control-Allow-Origin: http://ambergarden.com
3 Access-Control-Allow-Methods: POST, GET, OPTIONS
4 Access-Control-Allow-Headers: X-CUSTOM_HEADER
5 Access-Control-Max-Age: 1728000
6 ......

  浏览器分析该响应并了解到其被允许向服务端发送数据以后,其才会向服务端发送真正的POST请求:

1 POST /someData/ HTTP/1.1
2 Host: public-data.com
3 X-CUSTOM-HEADER: custom_header_value
4 ......
5 
6 [Payload Here]

  而服务端则会接收并处理该请求:

1 HTTP/1.1 200 OK
2 Access-Control-Allow-Origin: http://ambergarden.com
3 Content-Type: application/xml
4 ......
5 
6 [Payload Here]

  最后一种请求Requests with Credential的运行流程则和前两种请求类似。只不过在发送请求的时候,我们需要将用户凭证包含在请求中:

复制代码
1 function retrieveData() {
2     var request = new XMLHttpRequest();
3     request.open('GET', 'http://public-data.com/someData', true);
4     request.withCredentials = true;
5     request.onreadystatechange = handler;
6     request.send();
7 }
复制代码

  而在服务端的响应中,其将拥有一个额外的Access-Control-Allow-Credentials响应头:

1 HTTP/1.1 200 OK
2 Access-Control-Allow-Origin: http://ambergarden.com
3 Content-Type: application/xml
4 ......
5 
6 [Payload Here]

 

集成对CORS的支持

  从上面的示例中已经能够看到,在使用CORS来访问数据的时候,客户端不需要更改任何数据访问逻辑。所有的一切工作都是在服务端及浏览器之间自动完成的。因此如果希望为一个系统集成CORS支持的时候,我们需要做的工作主要集中在服务端。

  当然,集成工作实际上十分简单:在你的web.xml中添加一个Filter(或利用已有的Filter)并根据传入的请求首先判断其是哪一种CORS请求。在得知了请求的类型后,我们就可以决定到底以哪种方式响应用户了。这里的逻辑较为简单,因此我就不再赘述了。

 

转载请注明原文地址并标明转载:http://www.cnblogs.com/loveis715/p/4592246.html

分享到:
评论

相关推荐

    CORS解决跨域问题(403问题)

    Tomcat lib目录下添加cors-filter-1.7.jar,java-property-utils-1.9.jar这两个jar包,项目中web.xml 中添加filter,以及出现OPTIONS 类型的请求并返回403的解决方案;压缩文件包含jar文件,以及web.xml配置。

    cors跨域Tomcat文件

    【标题】"cors跨域Tomcat文件"涉及的是在Web开发中解决跨域问题的一种常见方法,即使用CORS(Cross-Origin Resource Sharing)机制在Apache Tomcat服务器上配置和实现。CORS是一种允许浏览器安全地从不同源加载资源...

    cors实现的跨域

    但随着Web应用的发展,跨域通信的需求越来越普遍,CORS应运而生,为开发者提供了安全、可控的跨域数据交互方式。 **一、CORS的基本原理** CORS通过在HTTP头部添加特定的字段来实现跨域请求。主要有两种类型:简单...

    GeoServer配置解决cors跨域问题的依赖jar包和配置说明.zip

    geoserver跨域设置: 1、将cors-filter-2.4.jar和java-property-utils-1.9.1.jar,两个jar包文件放入geoserver目录下webapps\geoserver\web-inf\lib中。 2、打开geoserver目录下webapps\geoserver\web-inf中的web....

    跨域cors扩展插件chrome

    标题中的“跨域cors扩展插件chrome”指的是用于解决Web应用程序跨域问题的Chrome浏览器扩展。在Web开发中,由于浏览器的同源策略限制,不同源的资源(比如域名、协议或端口不同)之间无法直接进行交互。CORS(Cross-...

    cors跨域问题对应的jar包.zip

    "cors跨域问题对应的jar包.zip"这个压缩包文件包含了处理跨域问题所需的两个关键库:`cors-filter-1.7.jar`和`java-property-utils-1.9.1.jar`。`cors-filter`是一个实现了CORS规范的Java过滤器,它允许我们在Tomcat...

    Spring boot 和Vue开发中CORS跨域问题解决

    本文旨在详细阐述CORS跨域问题的背景、解决方法以及如何在Spring Boot和Vue.js的结合使用场景下处理跨域问题。 ### CORS跨域问题背景 CORS全称是Cross-Origin Resource Sharing,即跨源资源共享。这个概念是W3C的...

    CORS跨域访问框架jra包

    `CORS跨域访问框架jra包`则提供了一种方便的方式来实现CORS支持,使得开发者可以轻松地在服务器端配置CORS策略。 `cors-filter-1.7.jar` 是这个框架的核心组件,它是一个基于Java的过滤器(Filter),可以集成到...

    CORS跨域资源共享及解决方案.docx

    ### CORS跨域资源共享及其解决方案详解 #### 一、CORS跨域资源共享背景 在现代Web应用开发中,前后端分离已成为一种主流趋势。在这种模式下,前端负责展示逻辑,而后端处理业务逻辑与数据交互。然而,由于浏览器...

    跨域的解决方案有多重JSONP、Flash、Iframe等,当然还有CORS(跨域资源共享,Cross-Origin Resource Sharing)

    然而,随着Web应用的发展,跨域数据交互的需求日益增多,因此催生了一系列跨域解决方案,包括JSONP、Flash、Iframe以及CORS(跨域资源共享,Cross-Origin Resource Sharing)。 首先,JSONP(JSON with Padding)是...

    SpringMVC CORS跨域测试包

    在现代Web应用程序中,由于前后端分离的设计,跨域问题常常出现,CORS为解决这个问题提供了安全的解决方案。 在SpringMVC框架中,实现CORS功能主要涉及到以下知识点: 1. **CORS原理**:CORS是通过浏览器和服务器...

    230208-033shopDemo(抽离跨域(Cors)限制依赖注入和管道中间件之AddCors和UseCors)

    Cors(跨域)限制中间件可以解决一些Cors(跨域)异常例如:“' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.”。...

    cors解决跨域web实例源码(结合网上改造)

    标题 "cors解决跨域web实例源码(结合网上改造)" 涉及的核心知识点是CORS(Cross-Origin Resource Sharing,跨源资源共享),这是一种机制,允许浏览器在执行JavaScript时访问不同源(即不同协议、域名或端口)的...

    在各种服务器(nginx,apache,tomcat)上设置CORS跨域设置.zip

    CORS跨域设置主要涉及到修改服务器配置,添加适当的HTTP响应头部,如`Access-Control-Allow-Origin`、`Access-Control-Allow-Methods`和`Access-Control-Allow-Headers`。具体实现方法因服务器类型而异,但核心思想...

    cors技术解决ajax跨域

    **CORS技术详解:解决AJAX跨域问题** 在Web开发中,由于浏览器的同源策略限制,AJAX请求只能向同一源(协议+域名+端口)发送,这在跨域请求时会遇到障碍。为了解决这个问题,CORS(Cross-Origin Resource Sharing,...

    JS跨域解决方案之使用CORS实现跨域

    引言  跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,...所以折腾了下闻名已久的CORS(跨域资源共享,Cross-Origin Resource Sharing),这边文章也就是折腾期间的小记与总结。 •CORS能做什么

    基于Gin+Vue的前后端分离文章管理系统,整合JWT鉴权、CORS跨域、Validator校验和GORM Gen数据库操作

    标题:基于Gin+Vue的前后端分离文章管理系统,整合JWT鉴权、CORS跨域、Validator校验和GORM Gen数据库操作 前端来自黑马教程 一、内容概要 本文主要介绍了如何构建一个基于Gin+Vue的前后端分离文章管理系统。项目...

    你可能不知道的CORS跨域资源共享

    CORS(跨域资源共享)是Web开发中解决跨域访问问题的一种机制,它允许浏览器在遵循同源策略的前提下,通过特定的HTTP头部与服务器通信,从而实现不同源之间的资源访问。这种机制是为了解决现代Web应用中由于同源策略...

Global site tag (gtag.js) - Google Analytics