文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

1.背景描述

跨域问题是浏览器同源安全制引起的特别常见的问题。不同前端语言针对跨域解决方法有所区别。比如Flex语言做跨域请求时,如果中间件存有跨域文件(crossdomain.xml)则可以轻松实现跨域。

而JS开发的前端,针对GET请求则又可以通过JSONP方式解决。补充一下JSONP的原理:通过创建一个 script 标签,将 src 设置为目标请求,插入到 DOM中,服务器接受该请求并返回数据,数据通常被包裹在回调钩子中。根据JSONP的实现原理,我们可以看到其无法支持POST请求方式。

回到我们文章的主题,使用tomcat发布了Geoserver,前端JS脚本通过常规JSONP的请求方式失效,此时如何实现跨域请求呢?

这里我总结两种思路,一种是转发代理方案,另一种是中间件支持跨域共享机制(CORS)。

2.方案一:转发代理

2.1基于Nginx的代理

假设有A服务器和B服务器,用户前端加载了A服务器的JS资源,然后该JS向B服务器后台发送请求,此时发生了跨域。基于Nginx的解决方案则是,在C(或者A或者B或者其他)服务器上搭建一个Nginx服务器,该服务器对A服务和B服务均做统一端口的代理,即前端通过同一IP:Port访问A上和B上的资源,从而避免浏览器的跨域问题。

方案示意图为:

2.2自定义实现代理转发(基于A服务器)

2.2.1原理

目前A服务器上的脚本想访问B服务器上的服务会引发跨域,如果我们将A服务器的脚本访问转移到A服务器上的后台对B服务器后台的访问,则可以规避跨域问题。

方案示意图为:

2.2.2具体实现

如果我们的代码层面仅仅是单独针对某个请求让其转移至后台,则其他类似问题则无法通用此解决方案。这里我们可以设计一种通用型的解决方案:

a.将所有需要走后台避免跨域的请求统一定义为http://IP:Port/name/proxy?Url=BServerUrl

b.后台对应的proxy方法中获取到Url后的参数,并且再次对Url后的参数进行传递参数的解析(BServerUrl中可以用&包含正常参数)。

c.转发解析到的B请求,获取返回结果再返回至前端。

注意,在实现中,我们还要同时考虑代理转发的Get请求和Post请求方式:

3.方案二:中间件跨域共享机制(CORS)

3.1CORS原理简介

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

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

以上内容均摘抄于:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

3.2具体实现

先下载CORS对应的Jar:

<!-- cors-filter-->
    <dependency org="com.thetransactioncompany" name="java-property-utils" rev="1.10" conf="common-release->default;" />
    <dependency org="com.thetransactioncompany" name="cors-filter" rev="2.5" conf="common-release->default;"/>

在Geoserver的Web.xml中加上如下配置:

重启Geoserver后测试。

测试环境说明:在同一台机器上测试,系统采用8081端口,Geoserver服务采用8080端口,不同端口同样会导致跨域。测试结果为跨域成功。

                    -----欢迎转载,但保留版权,请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^

解决Geoserver请求跨域的几种思路的更多相关文章

  1. 解决Geoserver请求跨域的几种思路,第二种思路用过

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景描述 跨域问题是浏览器同源安全制引起的特别常见的问题.不同前端语 ...

  2. 解决ajax请求跨域

    跨域大部分需要通过后台解决,引起跨域的原因: 3个问题同时满足 才可能产生跨域问题,即跨域(协议,主机名,端口号中有一个不同就产生跨域) 下面是解决方法 方法一 // ajax请求跨域 /* *解决a ...

  3. 解决Ajax请求跨域问题

    from:https://blog.csdn.net/wang379275614/article/details/53333775 上篇文章提到,由于浏览器的同源策略,使得,AJAX请求只能发给同源的 ...

  4. web api 解决Ajax请求跨域问题

    前端ajax请求接口时,经常出现跨域问题,当然了解决方法有很多种,比如: http://www.jb51.net/article/68424.htm 我本人恰好前后端都会一点,所以直接在接口端处理. ...

  5. python使用web.py开发httpserver,解决post请求跨域问题

    使用web.py做http server开发时,遇到postman能够正常请求到数据,但是浏览器无法请求到数据,查原因之后发现是跨域请求的问题. 跨域请求,就是在浏览器窗口中,和某个服务端通过某个 “ ...

  6. nginx配置 解决ajax请求跨域问题

    文章来源:http://to-u.xyz/2016/06/30/nginx-cors/ 背景描述 最近在研究RESTful API接口设计,使用的是Nginx,要实现本地http://127.0.0. ...

  7. cors解决ajax请求跨域问题

    Access-Control-Allow-Origin: * 适用tomcat部署的项目 在web.xml里添加以下内容 <filter> <filter-name>CorsF ...

  8. h5请求跨域问题Access-Control-Allow-Origin解决跨域

    访问后端接口报错:No 'Access-Control-Allow-Origin' header is present on the requested resource 解决: Access-Con ...

  9. vue开发环境和生产环境里面解决跨域的几种方法

    什么是跨域   跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...

随机推荐

  1. MySQL 四种隔离级别

    什么是事务 事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消.也就是事务具有原子性,一个事务中的一系列的操作要么全部成功,要么一个都不做. 事务的结束有 ...

  2. Android 切换横竖屏

    一个项目一般会自己先定义项目是横屏还是竖屏但是也有可以横屏和竖屏之间切换的activty. 切换横竖屏的方法: //判断当前屏幕方向if(getRequestedOrientation() == Ac ...

  3. 安卓开发笔记(二十五):ViewPager的使用

    首先我们来看看运行之后的效果: 然后我们也不多说废话了,下面是这个项目所需要的全部代码,很多博主写这个都不把代码写完,因此笔者自己也琢磨了一会儿才把这个弄出来,感觉很烦,但我肯定会把代码写全的.我这里 ...

  4. cmd 配置dchp服务器

    1.安装DHCP服务器角色,这样在netsh下才会有dhcp上下文 2.编写配置dhcp的脚本 从命令行运行netsh有两种语法: 比如要获取已经配置的网络接口列表 1.写全 netsh -r Rem ...

  5. RFID和QRCODE对比

    1.技术介绍 1.1 RFID 射频识别,RFID(Radio Frequency Identification)技术,又称无线射频识别,是一种通信技术,可通过无线电讯号识别特定目标并读写相关数据,而 ...

  6. falkonry

    falkonry.com/ 2019 Top 100 AI companies in the world

  7. css+js调整当前界面背景音量

    展示效果 html代码: <div> <audio id="audio" controls src="https://dbl.5518pay.com/r ...

  8. C#异步编程----Thread

    一.问题由来 多线程能实现的基础: 1.CPU运行速度太快,硬件处理速度跟不上,所以操作系统进行分时间片管理.这样,宏观角度来说是多线程并发 ,看起来是同一时刻执行了不同的操作.但是从微观角度来讲,同 ...

  9. Sitecore® 8.2 Professional Developer考试心得

    因工作原因入了Sitecore的坑.. 不了解Sitecore认证考试的同学请移步: http://www.cnblogs.com/edisonchou/archive/2018/08/17/9488 ...

  10. SpringMVC 参数传递和接收的几种方式

    普通传参 测试项目:SpringBoot2.0.不使用 form 表单传参,后端不需要指定 consumes . 使用 Postman 进行测试. @PathVariable 只能接收 URL 路径里 ...