簡單的測試彈簧引導和angular2應用程序的解決方案？

我已經構建了一個簡單的Web應用程序，它使用Spring Boot作爲服務器端操作（使用REST端點）和Angular2作爲前端。這些應用程序是分開的（例如，不在相同的目錄結構中）。如果我在8080上啓動Spring Boot應用程序，並在端口4200上啓動angular2，並嘗試在兩者之間進行交互，則會收到CORS錯誤。必須可以在同一臺機器上運行以進行測試？我正在使用spring引導項目附帶的apache服務器中的構建，我將如何創建允許CORS的頭文件？簡單的測試彈簧引導和angular2應用程序的解決方案？

我已經嘗試使用Docker和Heroku作爲可能的方式來解決在單個機器上工作，但沒有運氣。

我試圖解決方案建議，和我仍然得到以下錯誤：

[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)

這裏是我用來訪問本地主機的角度代碼：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()) 
}}

來源

2016-10-06 StillLearningToCode

是，在同一臺機器上運行支持spring-boot的app和angular2是完全可能的。正如你所提到的，它們都在不同的端口上運行，由angular2發送的請求被視爲CORS，因爲它具有與spring-boot不同的域。

您需要在春季啓動bean配置類似

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

添加CORS映射在上面的例子中，這將允許來自任何來源春天啓動的所有資源。要限制訪問您可以在以下FASION

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

或特定的資源將是

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

來源

2016-10-06 17:00:43

只是讓我理解正確的話，假設我把這個在config目錄中的彈簧啓動項目中添加映射。是否需要在任何地方撥打電話或自動連線？ – StillLearningToCode

不在config目錄中，只需將它放在任何已使用@Configuration註釋的類中。 Spring將在組件掃描期間接收這個配置。無需自動裝配到任何地方。 –

簡單的測試彈簧引導和angular2應用程序的解決方案？

回答

相關問題