1.概述
在本文中，我们将探讨如何在互相单独部署的前端应用程序和后端REST API服务之间进行通信。目的是解决浏览器的跨域资源访问和同源策略限制，允许页面UI能够调用后台的API，即使它们不在同一个服务器中。
我们在这里创建了两个独立的应用程序 - 一个UI应用程序和一个简单的REST API，我们将在UI应用程序中使用Zuul代理来代理对REST API的调用。Zuul是Netflix基于JVM的路由器和服务器端负载均衡器。Spring Cloud与嵌入式Zuul代理有很好的集成。
2.REST应用
我们的REST API应用程序是一个简单的Spring Boot应用程序。在本文中将在端口8081上运行服务器中部署的API 。
配置文件
server.contextPath=/spring-zuul-foos-resource server.port=8081
让我们首先为我们将要使用的资源定义基本DTO：
public class Foo {
private long id; private String name;
// standard getters and setters}定义一个简单的控制器：
@Controllerpublic class FooController {
@RequestMapping(method = RequestMethod.GET, value = "/foos/{id}") @ResponseBody
public Foo findById(
@PathVariable long id, HttpServletRequest req, HttpServletResponse res) { return new Foo(Long.parseLong(randomNumeric(2)), randomAlphabetic(4));
}
}3. 前端应用程序
我们的UI应用程序也是一个简单的Spring Boot应用程序。在本文中此应用运行在端口8080上。
首先，我们需要通过Spring Cloud向我们的UI应用程序的pom.xml添加对zuul支持的依赖：
<dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-netflix-zuul</artifactId></dependency>
接下来 - 我们需要配置Zuul，因为我们正在使用Spring Boot，所以我们将在application.yml中执行此操作：
zuul: routes: foos: path: /foos/** url: http://localhost:8081/spring-zuul-foos-resource/foos
注意：
使用zuul代理我们的资源服务器Foos。
来自UI的所有以“ / foos / ”开头的请求将被路由到我们的Foos资源服务器，地址为：http：// loclahost：8081/spring-zuul-foos-resource / foos /
然后编写我们的主页面index.html — 这里使用一些AngularJS：
<html><body ng-app="myApp" ng-controller="mainCtrl"><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="angular.min.js"></script><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="angular-resource.min.js"></script>
<script>var app = angular.module('myApp', ["ngResource"]);
app.controller('mainCtrl', function($scope,$resource,$http) {
$scope.foo = {id:0 , name:"sample foo"};
$scope.foos = $resource("/foos/:fooId",{fooId:'@id'});
$scope.getFoo = function(){
$scope.foo = $scope.foos.get({fooId:$scope.foo.id});
}
});</script>
<div>
<h1>Foo Details</h1>
<span>{{foo.id}}</span>
<span>{{foo.name}}</span>
<a href="#" ng-click="getFoo()">New Foo</a></div></body></html>这里最重要的方面是我们如何使用相对URL访问API ！
请记住，API应用程序未部署在与UI应用程序相同的服务器上，因此相对URL不起作用，并且在没有代理的情况下不起作用。
但是，通过代理，我们通过Zuul代理访问Foo资源，Zuul代理配置为将这些请求路由到实际部署API的位置。
最后，启用Boot的应用程序：
@EnableZuulProxy@SpringBootApplicationpublic class UiApplication extends SpringBootServletInitializer {
public static void main(String[] args) {
SpringApplication.run(UiApplication.class, args);
}
}这里使用@EnableZuulProxy注解来启动Zuul代理，这非常干净和简洁。
4.运行测试
分别启动2个应用系统，在浏览器中输入http://localhost:8080/index
每点击一次“New Foo”按钮就访问后台REST API一次。
5.定制Zuul过滤器
有多个Zuul过滤器可用，我们也可以创建自己的定制过滤器：
@Componentpublic class CustomZuulFilter extends ZuulFilter {
@Override
public Object run() {
RequestContext ctx = RequestContext.getCurrentContext();
ctx.addZuulRequestHeader("Test", "TestSample"); return null;
}
@Override
public boolean shouldFilter() { return true;
} // ...}这个简单的过滤器只是在请求头中添加了一个名为“ Test ” 的属性- 当然，我们可以根据需要增加我们的请求。
6.测试自定义Zuul过滤器
最后，让我们测试一下，确保我们的自定义过滤器正常工作 - 首先我们将在Foos资源服务器上修改我们的FooController：
@Controllerpublic class FooController {
@GetMapping("/foos/{id}") @ResponseBody
public Foo findById(
@PathVariable long id, HttpServletRequest req, HttpServletResponse res) { if (req.getHeader("Test") != null) {
res.addHeader("Test", req.getHeader("Test"));
} return new Foo(Long.parseLong(randomNumeric(2)), randomAlphabetic(4));
}
}现在 - 让我们测试一下：
@Testpublic void whenSendRequest_thenHeaderAdded() {
Response response = RestAssured.get("http://localhost:8080/foos/1");
assertEquals(200, response.getStatusCode());
assertEquals("TestSample", response.getHeader("Test"));
}
作者：RaiseHead
链接：https://www.jianshu.com/p/ef5c598508da
共同学习，写下你的评论
评论加载中...
作者其他优质文章
