简单的测试弹簧引导和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应用程序的解决方案？

回答

相关问题