CORS阻塞了上传、删除和发布请求，但是GET正在工作

Question

我不知所措。我正在尝试配置CORS，并且我已经尝试了在internet/Stack溢出中可以找到的所有东西。

请求在Postman中有效，但在使用公理的React中无效。

以下是我用于删除用户的函数（这在 Postman 中有效，但在 React 中触发时不起作用）：

 deleteEmployeeById(id) {
    // return axios.delete(API_BASE_URL + `employees/${id}`);
    var testing = "";
    return axios
      .delete(API_BASE_URL + `employees/${id}`, {
        headers: {
          Authorization: `Bearer ${HARDCODED_JWT_TESTING}`,
        },
      })
      .then("yessssss")
      .catch((error) => {
        console.log("failed to delete  emp by id" + error);
      });
  }
}

我有一个安全配置.java文件，如下所示：

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Autowired
    MyUserDetailsService myUserDetailsService;

    @Autowired
    private JwtRequestFilter jwtRequestFilter;

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        // TODO : use this line when i implement bcrypt
        // auth.userDetailsService(myUserDetailsService).passwordEncoder(passwordEncoder());
        auth.userDetailsService(myUserDetailsService);

    }

    // TODO : should use this password encoder
    // public PasswordEncoder passwordEncoder() {
    // return new BCryptPasswordEncoder();
    // }

    @Bean
    public PasswordEncoder passwordEncoder() {
        // TODO : not secure. Use a different encoder. testing only
        return NoOpPasswordEncoder.getInstance();
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        // allow users to access "authenticate" page without being authenticated
        // all other requests must be authenticated
        // stateless tells it to not create a session? Do i need? Not sure yet
        // http.csrf().disable().authorizeRequests().antMatchers("/api/authenticate").permitAll().anyRequest()
        // .authenticated().and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
        http.cors().configurationSource(request -> new CorsConfiguration().applyPermitDefaultValues()).and().csrf()
                .disable().authorizeRequests().antMatchers("/api/authenticate").permitAll().anyRequest().authenticated()
                .and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);

        http.addFilterBefore(jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);

    }

    @Override
    @Bean
    public AuthenticationManager authenticationManagerBean() throws Exception {
        // create bean of type 'authenticationManager'
        return super.authenticationManagerBean();
    }

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        final CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("*"));
        configuration.setAllowedMethods(Arrays.asList("HEAD", "GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"));
        configuration.setAllowCredentials(true);
        configuration.setAllowedHeaders(Arrays.asList("*"));
        configuration.setExposedHeaders(Arrays.asList("X-Auth-Token", "Authorization", "Access-Control-Allow-Origin",
                "Access-Control-Allow-Credentials"));
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

}

我不知道错误在哪个函数中，但我假设它是corsConfigurationSource（）方法。但是，我看不出这不应该工作的问题。在我尝试为应用程序添加安全性之前，它曾经工作过。

正如您在该方法中看到的，我已经设置了所有允许的方法，我允许所有来源等，但在尝试从我的数据库中删除用户时仍然会出现此错误：

Access to XMLHttpRequest at 'http://localhost:8080/api/employees/6151c89ea1b79f789a7a964b' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

不过，这在邮递员中确实有效。我可以删除用户没有问题，它只是在从我的前端React应用程序触发时无法正常工作。

看起来我允许CORS中的所有内容，任何想法还有什么需要配置的？？

Answer 1

为了更好地清晰和测试，您可以尝试通过以下方法测试您的corsConfigurationSource（）。请根据您的应用程序更改代码，例如源代码等。

@Bean
CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
    configuration.setAllowedMethods(Arrays.asList("*"));
    configuration.setAllowedHeaders(Arrays.asList("*"));
    configuration.setAllowCredentials(true);
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

它基本上允许所有标头，方法和源。它不适合生产，但出于测试目的，您可以尝试一下。

Answer 2

尝试在实例化CorsConfiguration后删除. applyPermitDefaultValue（）中的SecurityConfig调用。这基本上是将CORS配置重置为默认值：

• 允许所有具有CORS规范中定义的特殊值“*”的原点。只有在既没有设置原点也没有设置originPatterns的情况下才设置此选项
• 允许使用“简单”方法GET、HEAD和POST
• 允许所有标题
• 将最大年龄设置为1800秒（30分钟）

此外，调用配置Source（） 方法，而不是实例化新的配置。

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.cors().configurationSource(corsConfigurationSource()).and().csrf()
            .disable().authorizeRequests().antMatchers("/api/authenticate").permitAll().anyRequest().authenticated()
            .and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);

    http.addFilterBefore(jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);
}

此外，按如下方式更新您的CorsConfigurationSource：

@Bean
CorsConfigurationSource corsConfigurationSource() {
    final CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("http://localhost:3000"));
    configuration.setAllowedMethods(Arrays.asList("HEAD", "GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"));
    configuration.setAllowCredentials(true);
    configuration.setAllowedHeaders(Arrays.asList("*"));
    configuration.setExposedHeaders(Arrays.asList("X-Auth-Token", "Authorization", "Access-Control-Allow-Origin",
            "Access-Control-Allow-Credentials"));
    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}