在Angular App和Spring后端之间进行CORS半工作 [英] CORS semi working between Angular App and Spring backend

问题描述

在今年春季教程之后，我已将以下bean添加到我的配置逻辑中.请注意，我正在使用Spring Boot.

Following this Spring tutorial I've added the following bean to my configuration logic. Note that I am using Spring Boot.

如果您使用的是Spring Boot，建议仅声明一个WebMvcConfigurer bean，如下所示:

If you are using Spring Boot, it is recommended to just declare a WebMvcConfigurer bean as following:

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**") 
                    // Just slightly modified
                    .allowedMethods("HEAD", "GET", "PUT", "POST", 
                                    "DELETE", "PATCH", "OPTIONS")
                    .allowedOrigins("*")
                    .allowedHeaders("*");
        }
    };
}

这是事实:我可以从客户端注册用户:

Here's the thing: I am able to register a user from the client side:

onSubmit() {
  this.http.post('http://localhost:8080/register', this.registerForm.value)
    .subscribe(
      data => this.onRegisterSuccess(),
      err => alert(err.error.message)
    );
}

但是我无法访问我的OAuth2令牌的端点:

but I cannot access the endpoint for my OAuth2 token:

onSubmit() {
  const headers = new HttpHeaders()
    .set('Content-Type', 'application/x-www-form-urlencoded')
    .set('Authorization', 'Basic dGVzdGp3dGNsaWVudGlkOlhZN2ttem9OemwxMDA=');

  this.http.post('http://localhost:8080/oauth/token', this.loginForm.value, {headers: headers})
    .subscribe(
      data => this.onLoginSuccess(),
      err => alert(err.error.message)
    );
}

结果对话:

我不知道是什么问题.

推荐答案

授权标头很特殊. 您需要使用其他方法添加

The authorization header is special. You need to add with a different method

.allowCredentials(false)

这篇关于在Angular App和Spring后端之间进行CORS半工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！