Angular 角度应用程序显示cors问题,不重定向到azure ad登录页面

Angular 角度应用程序显示cors问题,不重定向到azure ad登录页面,angular,azure,spring-boot,Angular,Azure,Spring Boot,我已经创建了一个spring boot+Angular应用程序。我正在使用Azure广告进行授权。 当我运行SpringBoot应用程序并使用swagger对其进行测试时,它会自动重定向到Microsoft登录页面,并向我询问creds和api的工作情况。 但是当我使用angular来实现api时。。它显示了cors错误。 当我从我的spring应用程序中删除Azure广告的所有属性时,Angular项目工作正常(没有cors问题) 这是我的application.properties ser

我已经创建了一个spring boot+Angular应用程序。我正在使用Azure广告进行授权。 当我运行SpringBoot应用程序并使用swagger对其进行测试时,它会自动重定向到Microsoft登录页面,并向我询问creds和api的工作情况。 但是当我使用angular来实现api时。。它显示了cors错误。 当我从我的spring应用程序中删除Azure广告的所有属性时,Angular项目工作正常(没有cors问题)


这是我的application.properties

server.port=9090
spring.jpa.database=POSTGRESQL
spring.datasource.platform=postgres
spring.datasource.url=jdbc:postgresql://localhost:xxxxxx/xxxxxxx
spring.datasource.username=xxxxxxxx
spring.datasource.password=xxxxxxxx
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.jdbc.lob.non_contextual_creation=true



############### Azure Properties ##################
spring.security.user.name=seligent
spring.security.user.password=seligent

azure.activedirectory.tenant-id=51d1f24c-6xxxxxxxxxxx82e712c0cb
spring.security.oauth2.client.registration.azure.client-id=9f7148a8-xxxxxxxxxxxxxxxxx-909ab498ddc8
spring.security.oauth2.client.registration.azure.client-secret=~Ffh7qg5E-xxxxxxxxxxxxxxxxxxxy346k23

azure.activedirectory.user-group.allowed-groups=xxxxxxxxxxx
这是我的身材,格雷德尔

plugins {
    id 'org.springframework.boot' version '2.3.3.RELEASE'
    id 'io.spring.dependency-management' version '1.0.10.RELEASE'
}

group = 'com.sk'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

apply plugin: 'maven-publish'
apply plugin:'base'

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    
    //azure dependencies
    implementation 'org.springframework.boot:spring-boot-starter-security'
    implementation 'org.springframework.security:spring-security-oauth2-client'
    implementation 'org.springframework.security:spring-security-oauth2-jose'
    implementation 'com.microsoft.azure:azure-active-directory-spring-boot-starter:2.3.3'  
    
    runtimeOnly 'org.postgresql:postgresql'
    testImplementation('org.springframework.boot:spring-boot-starter-test') {
        exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
    }
    testImplementation 'org.springframework.security:spring-security-test'
    
}

test {
    useJUnitPlatform()
}

当我用angular点击api时,它显示cors错误

如果我从spring中删除azure的所有值,它就可以正常工作。 这是我的网站安全配置

@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Autowired
    private OAuth2UserService<OidcUserRequest, OidcUser> oidcUserService;

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
            .anyRequest().authenticated()
            .and()
            .oauth2Login()
            .userInfoEndpoint()
            .oidcUserService(oidcUserService);
    }
}

您需要在角度应用程序中设置选项。使用此选项调用HTTP请求

const options = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    Authorization: 'Basic ',// your authorization method
    'Access-Control-Allow-Headers':
      'Origin, X-Requested-With, Content-Type, Accept'
  })
};

getPerson(name: string): Observable<any> {
    return this.http
      .get<any>(baseUrl + '/persons/' + name, options)
      .pipe(catchError(this.handleError));
}
const选项={
标题:新的HttpHeaders({
“内容类型”:“应用程序/json”,
“访问控制允许来源”:“*”,
授权:'基本',//您的授权方法
“访问控制允许标头”:
'来源,X请求,内容类型,接受'
})
};
getPerson(名称:string):可观察{
返回此文件。http
.get(baseUrl+'/persons/'+名称,选项)
.pipe(catchError(this.handleError));
}
const options = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    Authorization: 'Basic ',// your authorization method
    'Access-Control-Allow-Headers':
      'Origin, X-Requested-With, Content-Type, Accept'
  })
};

getPerson(name: string): Observable<any> {
    return this.http
      .get<any>(baseUrl + '/persons/' + name, options)
      .pipe(catchError(this.handleError));
}