测试弹簧靴和angular2 app的简单解决方案？

时间：2016-10-06 15:46:18

标签： angular spring-boot cors

我构建了一个简单的Web应用程序，它使用Spring Boot进行服务器端操作（使用REST端点），使用Angular2作为前端。应用程序是分开的（例如，不在相同的目录结构中）。如果我启动弹簧启动应用程序，比如8080，并且端口4200上的angular2尝试在两者之间进行交互，我会收到CORS错误。必须可以在同一台机器上运行以进行测试吗？我正在使用Spring启动项目附带的apache服务器中的构建，我将如何创建允许CORS的头？

我尝试过使用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] _updateTaskCount@http://localhost:4200/main.bundle.js:65157:32
invokeTask@http://localhost:4200/main.bundle.js:65128:42
runTask@http://localhost:4200/main.bundle.js:65024:57
invoke@http://localhost:4200/main.bundle.js:65192:40
http://localhost:4200/main.bundle.js:66154:32
invokeTask@http://localhost:4200/main.bundle.js:65124:42
onInvokeTask@http://localhost:4200/main.bundle.js:54655:47
invokeTask@http://localhost:4200/main.bundle.js:65123:54
runTask@http://localhost:4200/main.bundle.js:65024:57
invoke@http://localhost:4200/main.bundle.js:65192:40
send@[native code]
scheduleTask@http://localhost:4200/main.bundle.js:66162:25
scheduleTask@http://localhost:4200/main.bundle.js:65104:36
send
http://localhost:4200/main.bundle.js:40330:22
subscribe@http://localhost:4200/main.bundle.js:10885:37
subscribe@http://localhost:4200/main.bundle.js:10882:26
searchWord@http://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
onInvoke@http://localhost:4200/main.bundle.js:54664:43
runGuarded@http://localhost:4200/main.bundle.js:64998:53
invokeTask@http://localhost:4200/main.bundle.js:65124:42
runTask@http://localhost:4200/main.bundle.js:65024:57
invoke@http://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)

这是我用来访问localhost的角度代码：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())
}}

2 个答案:

答案 0 :(得分：1)

是的，完全可以在同一台机器上运行启用spring-boot的app和angular2。正如您所提到的，它们都在不同的端口上运行，angular2发送的请求被视为CORS，因为它具有与spring-boot不同的域。

您需要在spring-boot bean配置中添加CORS映射，例如

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

在上面的示例中，它将允许任何来源的每个春季启动资源。要限制访问权限，您可以在以下fasion中添加映射

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

或者对于特定资源，它将是

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

答案 1 :(得分：0)

春季5或以上会有轻微变化

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("http://localhost:4200");
        }
    };
}
相关问题
最新问题