如何在不使用 Spring 安全性的情况下解决 CORS 问题

Question

我有这个 WebMvcConfigurer，当部署在服务器上时，它工作得很好。但是，当我尝试从本地服务的 Angular 项目向服务器发送请求时，出现以下错误。

Access to XMLHttpRequest at 'https://sub.domain.com/api/staff/logout' from origin 'http://localhost:4200' 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.

我的配置如下：

@Configuration
@EnableWebMvc
public class WebMvcConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowedOrigins("*")
                        .allowedHeaders("*")
                        .exposedHeaders("Access-Control-Allow-Origin", "Access-Control-Allow-Credentials")
                        .allowCredentials(true).maxAge(3600);
            }

            /**
             * To add our interceptor into Spring configuration, we need to override
             * addInterceptors() method WebMvcConfig class that implements WebMvcConfigurer.
             */
            @Override
            public void addInterceptors(InterceptorRegistry registry) {
                registry.addInterceptor(new AppInterceptor());
            }
        };
    }
}

我已经提到了其他问题，但我没有找到任何可以解决我问题的方法。提前致谢。

Answer 1

在您的 Angular 应用程序中，您可以添加一个 proxy.config.json 来在本地为您解决 CORS 问题。此配置仅影响在本地提供应用程序时，因此在生产环境中不会发生任何变化。

{
    "/api/*": {
      "target": "http://localhost:8080",
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": false
    }
}

另请参阅此答案： and the Angular documentation: https://angular.io/guide/build#proxying-to-a-backend-server

想法是，即使前端和后端在 localhost 上提供服务，也有一个本地服务器为 Angular 应用提供服务，还有一个本地服务器为您的应用提供服务后端。它们都在 不同的端口 上提供服务，这会导致跨域问题。通过使用代理，您可以有效地将 Angular 后端请求路由到 localhost:8080，因此从 Angular 的客户端角度来看，一切似乎都来自同一来源。

Answer 2

因为我将来会实施 Spring 安全性，虽然问题是 without Spring Security，但我通过添加解决了这个问题Spring 项目安全，

启动器依赖项：

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>

配置Class：

import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.web.cors.CorsConfiguration;

import java.util.List;

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowedHeaders(
                List.of("Authorization", "Cache-Control", "Content-Type", "X-PT-SESSION-ID", "NGSW-BYPASS"));
        corsConfiguration.setAllowedOrigins(List.of("*"));
        corsConfiguration
                .setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "PUT", "OPTIONS", "PATCH", "DELETE"));
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.setExposedHeaders(List.of("Authorization"));

        http.authorizeRequests().antMatchers("/**").permitAll().anyRequest().authenticated().and().csrf().disable()
                .cors().configurationSource(request -> corsConfiguration);

    }
}

我参考了 this 答案，还有其他答案可能对其他人也有帮助。请检查一下。

如何在不使用 Spring 安全性的情况下解决 CORS 问题

How to resolve CORS issue without using Spring Security

java

spring-mvc

spring-security

spring-boot