angular - 无法加载http ://localhost:9999/auth-service/oauth/token: Response for preflight has invalid HTTP status code 401

Question

尝试生成 Oauth2 token ，我使用了 Spring Boot Oauth2 和 Angular 5

在 postman 和curl中，我可以通过传递适当的值来生成 token ，并且使用相同的参数，它在Angular POST中不起作用

Error

OPTIONS http://localhost:9999/auth-service/oauth/token 401 () Failed to load http://localhost:9999/auth-service/oauth/token: Response for preflight has invalid HTTP status code 401.

Angular 代码

login2(credentials){
    let headers = new Headers();
    var creds = 'client_id=finance-service&client_secret=finance&grant_type=client_credentials&socpe=server';

    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append("Authorization", "Basic " + btoa("finance-service:finance"));
    console.log(btoa("finance-service:finance"))
    return new Promise((resolve) =>{
        this.http.post(SMSGlobal.authPath, creds, {headers : headers})
        .subscribe((data) =>{
            console.log(data.json());
        },
        (error) =>{
            console.log(error);
        })
    })
  }

我也在后端配置了 CORS

Answer 1

我在项目 Spring 5 + Angular 5 中遇到了同样的问题。我从 here 找到了解决方案

应添加 CORS 配置来解决此问题。代码如下

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
@Bean
public FilterRegistrationBean<CorsFilter> corsFilterRegistrationBean() { 

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("http://localhost:4200");
    config.addAllowedHeader("Authorization");
    config.addAllowedHeader("Content-Type");
    config.addAllowedHeader("Accept");
    config.addAllowedMethod("POST");
    config.addAllowedMethod("GET");
    config.addAllowedMethod("DELETE");
    config.addAllowedMethod("PUT");
    config.addAllowedMethod("OPTIONS");
    config.setMaxAge(3600L);
   // source.registerCorsConfiguration("/oauth/token", config); // Add "/oauth/token" explicitly
    source.registerCorsConfiguration("/**", config); // Global for all paths

    FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<CorsFilter>(new CorsFilter(source));
    bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
    return bean;
}
}