当 POST 请求从 vuejs 客户端发送到 oauth/token 时的 401 响应

Question

我的 spring 应用程序身份验证在我使用 postman 时工作正常。但是，当我从我的客户端执行此操作时，我得到 401 http 响应。

我为 cors 配置我的服务器如下：

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

这是来自vue客户端的post请求：

    var params = new URLSearchParams();
    params.append('grant_type', 'password');
    params.append('username', 'username1');
    params.append('password', 'password1');

    axios({
      method:'POST',
      baseURL: `http://localhost:8088/`,
      url: 'oauth/token',
      auth: { username:'my-trusted-client', password:'secret' },
      headers: { 'Access-Control-Allow-Origin': 'http://localhost:8080',
        "Content-type": "application/x-www-form-urlencoded; charset=utf-8"},
      data: params
    }).then ((response) => {
      console.log (response)
    }).catch ((error) => {
      console.log (error)
    })

我期待的响应是这样的：

 {
 "access_token": "5766cc81-87e7-44c5-9aad-188f7b109d75",
 "token_type": "bearer",
 "expires_in": 4999,
 "scope": "read write trust"
 }

相反，我收到：无法加载 http://localhost:8088/oauth/token：预检响应具有无效的 HTTP 状态代码 401。

此外，当我检查从浏览器发送的请求时，我发现它发送了一个 OPTIONS 请求，而不是 post。

服务器是运行端口 8088 客户端在端口 8080

上运行

我这里是不是遗漏了什么配置？

Answer 1

为了将来参考，我是这样解决这个问题的：我添加了以下 bean

 @Configuration
 public class CorsConfig {

      @Bean
      public FilterRegistrationBean myCorsFilter() {
           UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
           CorsConfiguration config = new CorsConfiguration();
           config.setAllowCredentials(true);
           config.addAllowedOrigin("http://localhost:8080");
           config.addAllowedHeader("*");
           config.addAllowedMethod("*");
           source.registerCorsConfiguration("/**", config);
           FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
           bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
           return bean;
      }
 }

请注意，虽然这样可以完成工作，但建议根据您的应用程序的需要配置允许的 headers 和方法

当 POST 请求从 vuejs 客户端发送到 oauth/token 时的 401 响应

401 response when a POST request is sent to oauth/token from vuejs client

authentication

spring

spring-security

oauth-2.0

spring-security-oauth2