Spring Boot / Angular index.html

Question

我将我的登录页面作为我的spring启动应用程序中的index.html。我该如何路由我的Angular应用来指向它呢?到目前为止，我已经掌握了所有的代码。任何输入或评论将非常感谢。这是我收到的错误。解析http://localhost:8080/

时Http失败login.component.html

<div>
<button (click)="getLoginPage()" class="btn btn-primary">Login</button>
</div>

login.component.ts

import { Component, OnInit } from '@angular/core';
import {HttpErrorResponse} from "@angular/common/http";
import {LoginService} from "../../service/login.service";
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
loginPage = '';
constructor(private loginService: LoginService) {
}
ngOnInit() {
this.getLoginPage();
}
public getLoginPage(): void {
this.loginService.getLoginPage().subscribe(
(response: any) => {
this.loginPage = response;
},
(error: HttpErrorResponse) => {
alert(error.message);
}
)
}
}

login.service.ts

import { Injectable } from '@angular/core';
import {environment} from "../../environments/environment";
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
@Injectable({
providedIn: 'root'
})
export class LoginService {
private apiServerUrl = environment.apiBaseUrl;
constructor(private http: HttpClient) { }
public getLoginPage(): Observable<any> {
return this.http.get<any>( this.apiServerUrl);
}
}

enviroment.ts

export const environment = {
production: false,
apiBaseUrl: 'http://localhost:8080'
};

CorsFilter

@Bean
public CorsFilter corsFilter() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.setAllowCredentials(true);
corsConfiguration.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
corsConfiguration.setAllowedHeaders(Arrays.asList("Origin", "Access-Control-Allow-Origin", "Content-Type",
"Accept", "Authorization", "Origin, Accept", "X-Requested-With",
"Access-Control-Request-Method", "Access-Control-Request-Headers"));
corsConfiguration.setExposedHeaders(Arrays.asList("Origin", "Content-Type", "Accept", "Authorization",
"Access-Control-Allow-Origin", "Access-Control-Allow-Origin", "Access-Control-Allow-Credentials"));
corsConfiguration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
return new CorsFilter(urlBasedCorsConfigurationSource);
}

Answer 1

试试这个:

public getLoginPage(): Observable<any> {
return this.http.get<any>( this.apiServerUrl, {
headers: new HttpHeaders({
'Accept': 'text/plain',
'Content-Type': 'text/plain'
}),
'responseType': 'text'
});
}