Einfache Lösung zum Testen von Springboot und angular2 App?

Ich habe eine einfache Webanwendung erstellt, die Spring Boot für serverseitige Operationen (mit REST-Endpunkten) und Angular2 für das Frontend verwendet. Die Anwendungen sind getrennt (z. B. nicht in der gleichen Verzeichnisstruktur). Wenn ich die Spring-Boot-App zum Beispiel auf 8080 und das angular2 auf Port 4200 starte und versuche, zwischen den beiden zu interagieren, bekomme ich CORS-Fehler. Es muss möglich sein, beide auf der gleichen Maschine zum Testen laufen zu lassen? Ich verwende den Build-in-Apache-Server, der mit Spring-Boot-Projekten geliefert wird. Wie würde ich einen Header erstellen, der CORS erlaubt?Einfache Lösung zum Testen von Springboot und angular2 App?

Ich habe versucht, Docker und Heroku als mögliche Wege zu verwenden, um auf einer einzigen Maschine arbeiten, aber kein Glück.

Ich habe die Lösung vorgeschlagen versucht und bin immer noch die folgende Fehlermeldung erhalten:

[Error] XMLHttpRequest cannot load localhost:8080/rest/b. Cross origin requests are only supported for HTTP. 
scheduleTask (main.bundle.js:66162) 
scheduleTask (main.bundle.js:65104) 
send (Anonymous Script 1 (line 2)) 
(anonymous function) (main.bundle.js:40330) 
subscribe (main.bundle.js:10885) 
subscribe (main.bundle.js:10882) 
searchWord (main.bundle.js:66254) 
_handle_keyup_13_1 (SearchComponent.ngfactory.js:301) 
(anonymous function) 
(anonymous function) (main.bundle.js:54098) 
(anonymous function) (main.bundle.js:28471) 
onInvoke (main.bundle.js:54664) 
runGuarded (main.bundle.js:64998) 
invokeTask (main.bundle.js:65124) 
runTask (main.bundle.js:65024) 
invoke (main.bundle.js:65192) 
[Error] EXCEPTION: More tasks executed then were scheduled. 
handleError (main.bundle.js:37937) 
next (main.bundle.js:24397:94) 
(anonymous function) (main.bundle.js:25913) 
__tryOrUnsub (main.bundle.js:44413) 
next (main.bundle.js:44362) 
_next (main.bundle.js:44315) 
next (main.bundle.js:44279) 
next (main.bundle.js:19954) 
emit (main.bundle.js:25905) 
onHandleError (main.bundle.js:54685) 
runTask (main.bundle.js:65027) 
invoke (main.bundle.js:65192) 
(anonymous function) (main.bundle.js:66154) 
invokeTask (main.bundle.js:65124) 
onInvokeTask (main.bundle.js:54655) 
invokeTask (main.bundle.js:65123) 
runTask (main.bundle.js:65024) 
invoke (main.bundle.js:65192) 
send 
scheduleTask (main.bundle.js:66162) 
scheduleTask (main.bundle.js:65104) 
send (Anonymous Script 1 (line 2)) 
(anonymous function) (main.bundle.js:40330) 
subscribe (main.bundle.js:10885) 
subscribe (main.bundle.js:10882) 
searchWord (main.bundle.js:66254) 
_handle_keyup_13_1 (SearchComponent.ngfactory.js:301) 
(anonymous function) 
(anonymous function) (main.bundle.js:54098) 
(anonymous function) (main.bundle.js:28471) 
onInvoke (main.bundle.js:54664) 
runGuarded (main.bundle.js:64998) 
invokeTask (main.bundle.js:65124) 
runTask (main.bundle.js:65024) 
invoke (main.bundle.js:65192) 
[Error] ORIGINAL STACKTRACE: 
handleError (main.bundle.js:37942) 
next (main.bundle.js:24397:94) 
(anonymous function) (main.bundle.js:25913) 
__tryOrUnsub (main.bundle.js:44413) 
next (main.bundle.js:44362) 
_next (main.bundle.js:44315) 
next (main.bundle.js:44279) 
next (main.bundle.js:19954) 
emit (main.bundle.js:25905) 
onHandleError (main.bundle.js:54685) 
runTask (main.bundle.js:65027) 
invoke (main.bundle.js:65192) 
(anonymous function) (main.bundle.js:66154) 
invokeTask (main.bundle.js:65124) 
onInvokeTask (main.bundle.js:54655) 
invokeTask (main.bundle.js:65123) 
runTask (main.bundle.js:65024) 
invoke (main.bundle.js:65192) 
send 
scheduleTask (main.bundle.js:66162) 
scheduleTask (main.bundle.js:65104) 
send (Anonymous Script 1 (line 2)) 
(anonymous function) (main.bundle.js:40330) 
subscribe (main.bundle.js:10885) 
subscribe (main.bundle.js:10882) 
searchWord (main.bundle.js:66254) 
_handle_keyup_13_1 (SearchComponent.ngfactory.js:301) 
(anonymous function) 
(anonymous function) (main.bundle.js:54098) 
(anonymous function) (main.bundle.js:28471) 
onInvoke (main.bundle.js:54664) 
runGuarded (main.bundle.js:64998) 
invokeTask (main.bundle.js:65124) 
runTask (main.bundle.js:65024) 
invoke (main.bundle.js:65192) 
[Error] [email protected]://localhost:4200/main.bundle.js:65157:32 
[email protected]://localhost:4200/main.bundle.js:65128:42 
[email protected]://localhost:4200/main.bundle.js:65024:57 
[email protected]://localhost:4200/main.bundle.js:65192:40 
http://localhost:4200/main.bundle.js:66154:32 
[email protected]://localhost:4200/main.bundle.js:65124:42 
[email protected]://localhost:4200/main.bundle.js:54655:47 
[email protected]://localhost:4200/main.bundle.js:65123:54 
[email protected]://localhost:4200/main.bundle.js:65024:57 
[email protected]://localhost:4200/main.bundle.js:65192:40 
[email protected][native code] 
[email protected]://localhost:4200/main.bundle.js:66162:25 
[email protected]://localhost:4200/main.bundle.js:65104:36 
send 
http://localhost:4200/main.bundle.js:40330:22 
[email protected]://localhost:4200/main.bundle.js:10885:37 
[email protected]://localhost:4200/main.bundle.js:10882:26 
[email protected]://localhost:4200/main.bundle.js:66254:63 
_handle_keyup_13_1 
[native code] 
http://localhost:4200/main.bundle.js:54098:36 
http://localhost:4200/main.bundle.js:28471:48 
[email protected]://localhost:4200/main.bundle.js:54664:43 
[email protected]://localhost:4200/main.bundle.js:64998:53 
[email protected]://localhost:4200/main.bundle.js:65124:42 
[email protected]://localhost:4200/main.bundle.js:65024:57 
[email protected]://localhost:4200/main.bundle.js:65192:40 
handleError (main.bundle.js:37943) 
next (main.bundle.js:24397:94) 
(anonymous function) (main.bundle.js:25913) 
__tryOrUnsub (main.bundle.js:44413) 
next (main.bundle.js:44362) 
_next (main.bundle.js:44315) 
next (main.bundle.js:44279) 
next (main.bundle.js:19954) 
emit (main.bundle.js:25905) 
onHandleError (main.bundle.js:54685) 
runTask (main.bundle.js:65027) 
invoke (main.bundle.js:65192) 
(anonymous function) (main.bundle.js:66154) 
invokeTask (main.bundle.js:65124) 
onInvokeTask (main.bundle.js:54655) 
invokeTask (main.bundle.js:65123) 
runTask (main.bundle.js:65024) 
invoke (main.bundle.js:65192) 
send 
scheduleTask (main.bundle.js:66162) 
scheduleTask (main.bundle.js:65104) 
send (Anonymous Script 1 (line 2)) 
(anonymous function) (main.bundle.js:40330) 
subscribe (main.bundle.js:10885) 
subscribe (main.bundle.js:10882) 
searchWord (main.bundle.js:66254) 
_handle_keyup_13_1 (SearchComponent.ngfactory.js:301) 
(anonymous function) 
(anonymous function) (main.bundle.js:54098) 
(anonymous function) (main.bundle.js:28471) 
onInvoke (main.bundle.js:54664) 
runGuarded (main.bundle.js:64998) 
invokeTask (main.bundle.js:65124) 
runTask (main.bundle.js:65024) 
invoke (main.bundle.js:65192)

hier ist der Winkel Code, den ich den lokalen Host zugreifen bin mit: 8080

import {Component, OnInit} from "@angular/core"; 
import {TreeService} from "../../service/tree.service"; 

@Component({ 
selector: 'app-search', 
templateUrl: './search.component.html', 
styleUrls: ['./search.component.css'] 
}) 
export class SearchComponent implements OnInit { 

searchStr: string; 

constructor(private _treeService: TreeService) { } 

searchWord() { 
this._treeService.searchWord(this.searchStr).subscribe(res => { 
    console.log(res) 
}) 
} 
} 


import { Injectable } from '@angular/core'; 
import {Http} from "@angular/http"; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class TreeService { 

private searchUrl:string; 

constructor(private _http:Http) { } 

searchWord(str:string){ 
this.searchUrl = 'localhost:8080/rest/' + str; 
return this._http.get(this.searchUrl) 
    .map(res => res.json()) 
}}

Quelle

2016-10-06 StillLearningToCode

Ja, Es ist absolut möglich, Spring-Boot-fähige App und Angular2 auf dem gleichen Rechner laufen zu lassen. Wie Sie bereits erwähnt haben, laufen beide auf verschiedenen Ports. Eine Anfrage, die von angular2 gesendet wird, wird als CORS behandelt, da sie eine andere Domain als Spring-Boot hat.

Sie benötigen CORS-Mappings im Frühjahr-Boot-Bean-Konfiguration so etwas wie

@Bean 
public WebMvcConfigurer corsConfigurer() { 
    return new WebMvcConfigurerAdapter() { 
     @Override 
     public void addCorsMappings(CorsRegistry registry) { 
      registry.addMapping("/**") 
        .allowedOrigins("*"); 
     } 
    }; 
}

In obigem Beispiel hinzuzufügen, wird es jede Ressource von Federverschluß aus beliebigen Ursprungs ermöglichen. Um den Zugang zu beschränken können Sie Mapping hinzufügen in folgenden fasion

registry.addMapping("/**") 
     .allowedOrigins("http://localhost:4200");

oder für bestimmte Ressource wird es

registry.addMapping("/some-resource-url-of-spring-boot-app") 
      .allowedOrigins("http://localhost:4200");

Quelle

2016-10-06 17:00:43

sein nur so verstehe ich richtig, nehme ich diese in einem Config-Verzeichnis innerhalb des Federbootprojektes . Muss es irgendwo angerufen oder automatisch verkabelt werden? – StillLearningToCode

Nicht im Config-Verzeichnis, einfach in jede Klasse einfügen, die mit @Configuration versehen wurde. Spring wird diese Konfiguration beim Komponentendurchlauf aufnehmen. Keine Notwendigkeit, überall autowire. –

Einfache Lösung zum Testen von Springboot und angular2 App?

Antwort

Verwandte Themen