streamalism.org

1. Áttekintés

Ebben a cikkben a kommunikáció a front-end alkalmazás és a külön telepített REST API között.

A cél az, hogy megkerülje a CORS-t és a böngésző azonos származási házirend-korlátozását, és lehetővé tegye az UI számára az API hívását, annak ellenére, hogy nem azonos eredetűek.

Alapvetően két külön alkalmazást fogunk létrehozni - egy felhasználói felületet és egy egyszerű REST API-t, és használni fogjuk a Zuul proxy az UI alkalmazásban a REST API-hoz történő hívások proxy-jához.

A Zuul egy JVM alapú útválasztó és szerveroldali terheléselosztó a Netflix részéről. A Spring Cloud pedig szépen integrálódik egy beágyazott Zuul-proxyval - amit itt fogunk használni.

2. Maven konfiguráció

Először hozzá kell adnunk egy függőséget a Spring Cloud zuul támogatásához felhasználói felületünkön pom.xml:

 org.springframework.cloud spring-cloud-starter-netflix-zuul 2.2.0. KÖZLEMÉNY 

A legújabb verzió itt található.

3. Zuul Tulajdonságok

Következő - be kell állítanunk a Zuul-t, és mivel a Spring Boot-ot használjuk, ezt a alkalmazás.yml:

zuul: útvonalak: foos: path: / foos / ** url: // localhost: 8081 / spring-zuul-foos-resource / foos

Vegye figyelembe, hogy:

• Közvetlenül az erőforrás-kiszolgálónkon vagyunk Foos.
• A felhasználói felület minden olyan kérése, amely „/ foos /”Lesz irányítva a mi Foos Erőforrás-kiszolgáló itt: // loclahost: 8081 / spring-zuul-foos-resource / foos /

4. Az API

Az API alkalmazásunk egy egyszerű Spring Boot alkalmazás.

Ebben a cikkben megvizsgáljuk az futó kiszolgálón telepített API-t a 8081-es porton.

Először határozzuk meg az alap DTO-t az erőforráshoz, amelyet használni fogunk:

nyilvános osztály Foo {private long id; privát karakterlánc neve; // szabványos mérőeszközök és beállítók}

És egy egyszerű vezérlő:

@RestController public class FooController {@GetMapping ("/ foos / {id}") public Foo findById (@PathVariable long id, HttpServletRequest req, HttpServletResponse res) {return new Foo (Long.parseLong (randomNumeric (2)), 4)); }}

5. Az UI alkalmazás

UI alkalmazásunk szintén egy egyszerű Spring Boot alkalmazás.

Ebben a cikkben megvizsgáljuk az futó kiszolgálón telepített API-t a 8080-as porton.

Kezdjük a fővel index.html - egy kis AngularJS használatával:

     var app = szögletes.modul ('myApp', ["ngResource"]); app.controller ('mainCtrl', function ($ hatókör, $ erőforrás, $ http) {$ hatókör.foo = {id: 0, név: "minta foo"}; : fooId ", {fooId: '@ id'}); $ scope.getFoo = function () {$ scope.foo = $ scope.foos.get ({fooId: $ scope.foo.id});}}) ; {{foo.id}} {{foo.name}} Új Foo 

A legfontosabb szempont itt az, hogyan érjük el az API-t relatív URL-ek használatával!

Ne feledje, hogy az API-alkalmazás nem ugyanazon a kiszolgálón van telepítve, mint a felhasználói felület, ezért a relatív URL-eknek nem kellene működniük, és nem fog működni proxy nélkül.

A proxyval azonban hozzáférünk a Foo erőforrásokat a Zuul proxyn keresztül, amely természetesen úgy van konfigurálva, hogy továbbítsa ezeket a kéréseket, bárhova is telepítse az API-t.

Végül pedig a valójában a Boot engedélyezett alkalmazás:

@EnableZuulProxy @SpringBootApplication nyilvános osztály Az UiApplication kiterjeszti a SpringBootServletInitializer {public static void main (String [] argumentum) {SpringApplication.run (UiApplication.class, args); }}

Az egyszerű Boot kommentár mellett vegye figyelembe, hogy a Zuul proxy esetében is használjuk az annotation engedélyezési stílusát, ami nagyon jó, tiszta és tömör.

6. Tesztelje az útválasztást

Most - teszteljük a felhasználói felületet - az alábbiak szerint:

@Test public void whenSendRequestToFooResource_thenOK () {Response response = RestAssured.get ("// localhost: 8080 / foos / 1"); assertEquals (200, response.getStatusCode ()); }

7. Egyéni Zuul szűrő

Több Zuul szűrő áll rendelkezésre, és létrehozhatunk saját egyedi szűrőt is:

@Component public class CustomZuulFilter kiterjeszti a ZuulFilter {@Orride public Object run () {RequestContext ctx = RequestContext.getCurrentContext (); ctx.addZuulRequestHeader ("Test", "TestSample"); return null; } @Orride public boolean shouldFilter () {true true; } // ...}

Ez az egyszerű szűrő csak hozzáad egy fejlécet,Teszt”A kérésnek - de természetesen olyan bonyolulttá válhatunk, amennyire csak szükségünk van, itt bővíthetjük kéréseinket.

8. Tesztelje az egyedi Zuul szűrőt

Végül teszteljük, győződjön meg arról, hogy az egyéni szűrőnk működik-e - először módosítjuk a szűrőnket FooController a Foos erőforrás-kiszolgálón:

@RestController public class FooController {@GetMapping ("/ foos / {id}") 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)); }}

Most - próbáljuk ki:

@Test public void whenSendRequest_thenHeaderAdded () {Response response = RestAssured.get ("// localhost: 8080 / foos / 1"); assertEquals (200, response.getStatusCode ()); assertEquals ("TestSample", response.getHeader ("Test")); }

9. Következtetés

Ebben az írásban arra összpontosítottunk, hogy a Zuul-t felhasználjuk egy felhasználói felületről érkező kérelmek REST API-ba történő továbbításához. Sikeresen dolgoztuk ki a CORS-t és az azonos eredetű házirendet, valamint sikerült testreszabnunk és kibővítenünk a HTTP-kérést az átutazás során.

A teljes végrehajtása ennek az oktatóanyagnak a GitHub projektjében található meg - ez egy Maven-alapú projekt, ezért könnyen importálhatónak és futtathatónak kell lennie.