CN108256069A - 一种页面跨域访问的方法和装置 - Google Patents

Abstract

本说明书实施例提供一种页面跨域访问的方法和装置，其中的方法包括：拦截浏览器在打开目标页面的过程中发送的访问请求；访问请求中包括：目标页面对应的第一域名以及请求跨域访问的页面资源对应的第二域名；在确定允许第一域名跨域访问第二域名时，指示浏览器基于CORS在访问请求中设置HTTP请求头；拦截第二域名对应的对方服务器返回的访问响应；在访问响应中，设置用于表示支持第一域名访问第二域名的HTTP响应头，并将设置后的访问响应返回至浏览器，以使得浏览器显示目标页面。

Description

一种页面跨域访问的方法和装置

技术领域

本公开涉及计算机技术领域，特别涉及一种页面跨域访问的方法和装置。

背景技术

在移动端应用上，为增强动态性和更新率，越来越多的应用使用HTML5开发。页面可以通过移动端的浏览器WebView打开。随着页面越来越复杂，有的页面的打开显示还需要浏览器进行跨域访问。例如，域名www.a.com的页面在打开时需要调用www.b.com提供的服务接口。但是，出于安全方面的考虑，WebView通常不允许跨域调用其他页面的对象，比如，www.a.com域名无法访问www.b.com域名下的对象，这将影响到www.a.com的页面的正常显示。

可以采用jsonp、CORS(Cross Origin Resource Sharing，跨域资源共享)等多种方案来实现跨域访问，以CORS为例：用户在请求打开www.a.com下的页面时，浏览器可以在页面请求的HTTP头添加字段Origin为https://www.a.com，而访问的www.b.com的服务器需要在响应中设置Access-Control-Allow-Origin为包含https://www.a.com，这样页面请求才能成功调用www.b.com上的接口。但是这种方案需要页面请求侧的浏览器与访问的对方服务器合作实现，对方服务器也需要配置准许访问的策略。

发明内容

有鉴于此，本公开提供一种页面跨域访问的方法和装置，以使得跨域访问的实现方法更加简单。

具体地，本说明书一个或多个实施例是通过如下技术方案实现的：

第一方面，提供一种页面跨域访问的方法，所述方法包括：

拦截浏览器在打开目标页面的过程中发送的访问请求，所述访问请求用于请求获取目标页面显示所需的页面资源；所述访问请求中包括：所述目标页面对应的第一域名、以及请求跨域访问的所述页面资源对应的第二域名；

在确定允许所述第一域名跨域访问第二域名时，指示浏览器基于跨域资源共享CORS在所述访问请求中设置HTTP请求头；

拦截所述第二域名对应的对方服务器返回的访问响应，所述访问响应中包括：所述对方服务器返回的所述页面资源；

在所述访问响应中，设置用于表示支持所述第一域名访问第二域名的HTTP响应头，并将设置后的所述访问响应返回至浏览器，以使得所述浏览器根据所述页面资源显示所述目标页面。

第二方面，提供一种页面跨域访问的装置，所述装置包括：

请求拦截模块，用于拦截浏览器在打开目标页面的过程中发送的访问请求，所述访问请求用于请求获取目标页面显示所需的页面资源；所述访问请求包括：所述目标页面对应的第一域名、以及请求访问的所述页面资源对应的第二域名；

请求设置模块，用于在确定允许所述第一域名访问第二域名时，指示浏览器基于跨域资源共享CORS在所述访问请求中设置HTTP请求头；

响应拦截模块，用于拦截所述第二域名对应的对方服务器返回的访问响应，所述访问响应中包括：所述对方服务器返回的所述页面资源；

响应设置模块，用于在所述访问响应中，设置用于表示支持所述第一域名访问第二域名的HTTP响应头，并将设置后的所述访问响应返回至浏览器，以使得所述浏览器根据所述页面资源显示所述目标页面。

第三方面，提供一种页面跨域访问的设备，所述设备包括存储器、处理器，以及存储在存储器上并可在处理器上运行的计算机指令，所述处理器执行指令时实现以下步骤：

拦截浏览器在打开目标页面的过程中发送的访问请求，所述访问请求用于请求获取目标页面显示所需的页面资源；所述访问请求中包括：所述目标页面对应的第一域名、以及请求访问的所述页面资源对应的第二域名；

在确定允许所述第一域名访问第二域名时，指示浏览器基于跨域资源共享CORS在所述访问请求中设置HTTP请求头；

拦截所述第二域名对应的对方服务器返回的访问响应，所述访问响应中包括：所述对方服务器返回的所述页面资源；

在所述访问响应中，设置用于表示支持所述第一域名访问第二域名的HTTP响应头，并将设置后的所述访问响应返回至浏览器，以使得所述浏览器根据所述页面资源显示所述目标页面。

本说明书一个或多个实施例的页面跨域访问的方法和装置，通过由客户端指示浏览器设置CORS的HTTP请求头，并对对方服务器的响应设置HTTP响应头，使得页面开发不需要再考虑跨域访问的限制，对方服务器也不再需要进行CORS的跨域配置，从而使得跨域访问的实现方法更加简单。

附图说明

为了更清楚地说明本说明书一个或多个实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本说明书一个或多个实施例中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本说明书一个或多个实施例提供的一种CORS跨域访问的系统架构图；

图2为本说明书一个或多个实施例提供的一种跨域访问的方法的流程图；

图3为本说明书一个或多个实施例提供的一种跨域访问的装置的结构图。

具体实施方式

为了使本技术领域的人员更好地理解本说明书一个或多个实施例中的技术方案，下面将结合本说明书一个或多个实施例中的附图，对本说明书一个或多个实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是一部分实施例，而不是全部的实施例。基于本说明书一个或多个实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本公开保护的范围。

跨域访问是一个经常遇到的问题。例如：域名A(http://a.example)的某Web应用程序中通过<img>标签引入了域名B(http://b.foo)站点的某图片资源(http://b.foo/image.jpg)。这就是一个跨域请求。但是，基于同源策略，浏览器不允许跨域调用其他域名下的对象，又例如，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。

为了解决跨域访问的问题，可以采用多种方法，本说明书一个或多个实施例提供的跨域访问的方法，可以是在CORS方案上所做的改进。

参见图1所示的CORS跨域访问的系统架构图，如图1所示，浏览器11可以加载显示页面，例如，该浏览器可以是用户手机APP12中显示页面所用的WebView控件。并假设一个待显示的目标页面13是域名www.a.com下的页面，比如是https://www.a.com/A.html。并假设在该目标页面13的显示过程中需要加载一个图片14，而这个图片14是另一个域名www.b.com下的资源，存储在对方服务器15中。https://www.b.com/B.json是这个图片14的一个对外访问接口。

本说明书一个或多个实施例提供的跨域访问的方法，将使得浏览器能够成功调用访问接口B.json，由对方服务器15中获取到图片14，以显示目标页面13。如下结合图2的流程图来描述该方法：

在步骤200中，APP获取允许跨域访问的白名单。

在一个例子中，可以在用户打开手机上的APP时，触发APP同步白名单。例如，APP可以由APP网关获取白名单。

白名单中可以记录允许跨域访问的域名对之间的访问关系，如下表1示例部分白名单中记录的访问关系：

表1白名单

请求域名	被请求访问的域名
		www.a.com	www.b.com

若第一域名访问第二域名的访问关系存储于白名单内，比如，上述表1中，www.a.com访问www.b.com，则可以确定允许第一域名www.a.com访问第二域名www.b.com下的对象。此外，在白名单的访问关系中，还可以包括：一个第一域名与多个第二域名之间的访问关系。比如，www.a.com既可以访问www.b.com，又可以访问www.c.com。

在实际实施中，白名单中内容的设置可以更加灵活，比如，可以设置两份白名单，一份白名单可以用于记录本域名可以访问的其他域名，即本域名作为发送访问请求的一方，另一份白名单可以用于记录本域名作为被访问一方时，允许被哪些其他域名访问。这两份白名单可以采用不同的安全控制策略，对于本域名作为被访问的一方时，可以提高安全控制。

在步骤202中，浏览器接收到页面显示请求，请求打开目标页面。

例如，用户在打开的APP中点击要进入到目标页面www.a.com/A.html。该页面的对应的域名是www.a.com。

在步骤204中，APP拦截浏览器在打开目标页面的过程中发送的访问请求，所述访问请求用于请求获取目标页面显示所需的页面资源。

例如，浏览器在接收到页面打开的请求后，则可以开始发送访问请求，以获取目标页面显示所需的页面资源。比如，要获取图1中的图片14，该图片14存储在对方服务器15中，并且对图片14的访问要进行跨域访问，要请求访问接口https://www.b.com/B.json。

本步骤中，访问请求中可以包括：目标页面对应的第一域名www.a.com，请求访问的所述页面资源对应的第二域名https://www.b.com。当然，访问请求中还可以包括其他信息，并不限于上述第一域名和第二域名。

需要说明的是，在本例子中，在页面的开发时不再考虑跨域访问的问题，不论是跨域访问，还是非跨域访问，浏览器执行的都是普通的访问请求。在后续步骤中，由APP来判断这个请求是否是允许的跨域请求。

在步骤206中，APP判断第一域名访问第二域名的访问关系是否存储于白名单内。本步骤中，APP可以根据访问请求确定这是一个跨域请求，并且查询在步骤200中获取到的白名单，判断访问请求中包括的第一域名和第二域名的访问关系，是否存在于白名单中。

若判断结果为是，则执行步骤208；否则，执行步骤220。

在步骤208中，APP指示浏览器基于跨域资源共享CORS在所述访问请求中设置HTTP请求头。

例如，APP可以指示浏览器在访问请求的HTTP请求头中，添加Origin:http://www.a.com，以表明请求的来源域即第一域名。

在步骤210中，浏览器向对方服务器发送基于CORS的跨域请求。本步骤主要是浏览器要询问对方服务器是否允许对来源域的跨域访问。

在步骤212中，APP拦截对方服务器向浏览器返回的访问响应，所述访问响应中包括：所述对方服务器返回的所述页面资源。

本例子中，对方服务器可以不做CROS的配置，而是可以直接返回页面资源比如上述的图片14。由APP来代替对方服务器在访问响应中设置HTTP响应头，比如，可以设置Access-Control-Allow-Origin头信息。

在步骤214中，APP在所述访问响应中，设置用于表示支持所述第一域名访问第二域名的HTTP响应头。

例如，可以设置HTTP响应头的origin字段即Access-Control-Allow-Origin:*，则允许所有域名的脚本访问该资源。

或者，可以设置Access-Control-Allow-Origin:http://www.a.com，允许特定的第一域名访问该图片资源。

在步骤216中，APP将设置后的所述访问响应返回至浏览器。

在步骤218中，浏览器根据访问响应，确定允许跨域请求，则将所述页面资源显示在目标页面。

例如，浏览器看到Access-Control-Allow-Origin:http://www.a.com，则可以确定对方服务器允许第一域名www.a.com的跨域访问，则正常显示图片即可。

在步骤220中，若确定不允许所述第一域名访问第二域名，则对所述访问响应不设置所述HTTP响应头，以使得浏览器拒绝显示所述页面资源。

例如，如果确定不允许所述第一域名访问第二域名，则根据浏览器的跨域限制，将不允许第一域名访问第二域名的资源，目标页面将不能正常显示。APP可以既不指示浏览器设置HTTP请求头，也不会设置HTTP响应头。

本例子的页面跨域访问的方法，通过由客户端指示浏览器设置CORS的HTTP请求头，并对对方服务器的响应设置HTTP响应头，使得页面开发不需要再考虑跨域访问的限制，对方服务器也不再需要进行CORS的跨域配置，从而使得跨域访问的实现方法更加简单。

为了实现上述的页面跨域访问的方法，本说明书一个或多个实施例还提供了一种页面跨域访问的装置。如图3所示，该装置可以包括：请求拦截模块31、请求设置模块32、响应拦截模块33和响应设置模块34。

请求拦截模块31，用于拦截浏览器在打开目标页面的过程中发送的访问请求，所述访问请求用于请求获取目标页面显示所需的页面资源；所述访问请求包括：目标页面对应的第一域名、以及请求访问的页面资源对应的第二域名；

请求设置模块32，用于在确定允许所述第一域名访问第二域名时，则指示浏览器基于跨域资源共享CORS在所述访问请求中设置HTTP请求头；

响应拦截模块33，用于拦截所述第二域名对应的对方服务器返回的访问响应，所述访问响应中包括：所述对方服务器返回的所述页面资源；

响应设置模块34，用于在所述访问响应中，设置用于表示支持所述第一域名访问第二域名的HTTP响应头，并将设置后的所述访问响应返回至浏览器，以使得所述浏览器根据所述页面资源显示所述目标页面。

在一个例子中，请求设置模块32，在用于确定允许第一域名访问第二域名时，包括：在所述拦截浏览器发送的页面访问请求之前，获取允许跨域访问的白名单，所述白名单中包括：允许访问的域名对之间的访问关系；若所述第一域名访问第二域名的访问关系存储于所述白名单内，则确定允许所述第一域名访问第二域名。

在一个例子中，响应设置模块34，在用于设置用于表示支持所述第一域名访问第二域名的HTTP响应头时，包括：在所述HTTP响应头的origin字段，设置允许访问当前的第一域名；或者，在HTTP响应头的origin字段，设置允许访问所有域名。

在一个例子中，响应设置模块34，还用于若确定不允许所述第一域名访问第二域名，则对所述访问响应不设置HTTP响应头，以使得浏览器拒绝显示所述页面资源。

为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本说明书一个或多个实施例时可以把各模块的功能在同一个或多个软件和/或硬件中实现。

上述方法实施例所示流程中的各个步骤，其执行顺序不限制于流程图中的顺序。此外，各个步骤的描述，可以实现为软件、硬件或者其结合的形式，例如，本领域技术人员可以将其实现为软件代码的形式，可以为能够实现所述步骤对应的逻辑功能的计算机可执行指令。当其以软件的方式实现时，所述的可执行指令可以存储在存储器中，并被设备中的处理器执行。

例如，对应于上述方法，本说明书一个或多个实施例同时提供一种页面跨域访问的设备，该设备可以包括处理器、存储器以及存储在存储器上并可在处理器上运行的计算机指令，所述处理器通过执行所述指令，用于实现如下步骤：

拦截浏览器在打开目标页面的过程中发送的访问请求，所述访问请求用于请求获取目标页面显示所需的页面资源；所述访问请求中包括：所述目标页面对应的第一域名、以及请求访问的所述页面资源对应的第二域名；

在确定允许所述第一域名访问第二域名时，则指示浏览器基于跨域资源共享CORS在所述访问请求中设置HTTP请求头；

拦截所述第二域名对应的对方服务器返回的访问响应，所述访问响应中包括：所述对方服务器返回的所述页面资源；

在所述访问响应中，设置用于表示支持所述第一域名访问第二域名的HTTP响应头，并将设置后的所述访问响应返回至浏览器，以使得所述浏览器根据所述页面资源显示所述目标页面。

上述实施例阐明的装置或模块，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机，计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。

本领域内的技术人员应明白，本说明书一个或多个实施例可提供为方法、系统、或计算机程序产品。因此，本说明书一个或多个实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本说明书一个或多个实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本说明书一个或多个实施例可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本说明书一个或多个实施例，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于服务端设备实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

以上所述仅为本说明书一个或多个实施例的较佳实施例而已，并不用以限制本公开，凡在本公开的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本公开保护的范围之内。

Claims (10)

1.一种页面跨域访问的方法，所述方法包括：

拦截浏览器在打开目标页面的过程中发送的访问请求，所述访问请求用于请求获取目标页面显示所需的页面资源；所述访问请求中包括：所述目标页面对应的第一域名、以及请求跨域访问的所述页面资源对应的第二域名；

在确定允许所述第一域名跨域访问第二域名时，指示浏览器基于跨域资源共享CORS在所述访问请求中设置HTTP请求头；

拦截所述第二域名对应的对方服务器返回的访问响应，所述访问响应中包括：所述对方服务器返回的所述页面资源；

在所述访问响应中，设置用于表示支持所述第一域名访问第二域名的HTTP响应头，并将设置后的所述访问响应返回至浏览器，以使得所述浏览器根据所述页面资源显示所述目标页面。

2.根据权利要求1所述的方法，所述确定允许第一域名访问第二域名，包括：

在所述拦截浏览器发送的页面访问请求之前，获取允许跨域访问的白名单，所述白名单中包括：允许跨域访问的域名对之间的访问关系；

若所述第一域名访问第二域名的访问关系存储于所述白名单内，则确定允许所述第一域名访问第二域名。

3.根据权利要求2所述的方法，所述访问关系中包括：一个第一域名与多个第二域名之间的访问关系。

4.根据权利要求1所述的方法，所述设置用于表示支持所述第一域名访问第二域名的HTTP响应头，包括：

在所述HTTP响应头的origin字段，设置允许访问当前的第一域名；

或者，在所述HTTP响应头的origin字段，设置允许访问所有域名。

5.根据权利要求1所述的方法，在所述拦截浏览器在打开目标页面的过程中发送的访问请求之后，所述方法还包括：

若确定不允许所述第一域名访问第二域名，则对所述访问响应不设置所述HTTP响应头，以使得浏览器拒绝显示所述页面资源。

6.一种页面跨域访问的装置，所述装置包括：

请求拦截模块，用于拦截浏览器在打开目标页面的过程中发送的访问请求，所述访问请求用于请求获取目标页面显示所需的页面资源；所述访问请求包括：所述目标页面对应的第一域名、以及请求访问的所述页面资源对应的第二域名；

请求设置模块，用于在确定允许所述第一域名访问第二域名时，指示浏览器基于跨域资源共享CORS在所述访问请求中设置HTTP请求头；

响应拦截模块，用于拦截所述第二域名对应的对方服务器返回的访问响应，所述访问响应中包括：所述对方服务器返回的所述页面资源；

响应设置模块，用于在所述访问响应中，设置用于表示支持所述第一域名访问第二域名的HTTP响应头，并将设置后的所述访问响应返回至浏览器，以使得所述浏览器根据所述页面资源显示所述目标页面。

7.根据权利要求6所述的装置，

所述请求设置模块，在用于确定允许第一域名访问第二域名时，包括：在所述拦截浏览器发送的页面访问请求之前，获取允许跨域访问的白名单，所述白名单中包括：允许访问的域名对之间的访问关系；若所述第一域名访问第二域名的访问关系存储于所述白名单内，则确定允许所述第一域名访问第二域名。

8.根据权利要求6所述的装置，

所述响应设置模块，在用于设置用于表示支持所述第一域名访问第二域名的HTTP响应头时，包括：在所述HTTP响应头的origin字段，设置允许访问当前的第一域名；或者，在HTTP响应头的origin字段，设置允许访问所有域名。

9.根据权利要求6所述的装置，

所述响应设置模块，还用于若确定不允许所述第一域名访问第二域名，则对所述访问响应不设置HTTP响应头，以使得浏览器拒绝显示所述页面资源。

10.一种页面跨域访问的设备，所述设备包括存储器、处理器，以及存储在存储器上并可在处理器上运行的计算机指令，所述处理器执行指令时实现以下步骤：

拦截浏览器在打开目标页面的过程中发送的访问请求，所述访问请求用于请求获取目标页面显示所需的页面资源；所述访问请求中包括：所述目标页面对应的第一域名、以及请求访问的所述页面资源对应的第二域名；

在确定允许所述第一域名访问第二域名时，指示浏览器基于跨域资源共享CORS在所述访问请求中设置HTTP请求头；

拦截所述第二域名对应的对方服务器返回的访问响应，所述访问响应中包括：所述对方服务器返回的所述页面资源；

在所述访问响应中，设置用于表示支持所述第一域名访问第二域名的HTTP响应头，并将设置后的所述访问响应返回至浏览器，以使得所述浏览器根据所述页面资源显示所述目标页面。