如何在本地主机上的 Spring 和 Angular 2 之间启用 CORS

Question

我在 Spring 版本 4.3.4.RELEASE 和 Spring 安全版本 4.2.2.RELEASE 上有一个带有 Java 后端的旧项目。 没有办法更新库，我必须使用现有的库。 该项目不是 REST API，没有 RestController 和 WebMvcConfigurer。 所以，我按照这里的建议配置了 cors ：

@EnableWebSecurity
@Configuration
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {

    protected SecurityConfiguration() {
        super();
    }

    @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {
        httpSecurity
                // we don't need CSRF because our token is invulnerable
                .csrf().disable()

                // don't create session
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()

                .authorizeRequests()

                // allow anonymous resource requests
                .antMatchers(HttpMethod.GET,
                        "/",
                        "/*.html",
                        "/favicon.ico",
                        "/**/*.html",
                        "/**/*.css",
                        "/**/*.js")
                .permitAll()
                .antMatchers(HttpMethod.POST, "/rpc/*").permitAll()
                .anyRequest().permitAll();

        httpSecurity.addFilterBefore(new CorsFilter(), ChannelProcessingFilter.class);

        // disable page caching
        httpSecurity.headers().cacheControl();
    }
}

Cors 过滤器：

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter extends OncePerRequestFilter {

    private static final org.slf4j.Logger logger = org.slf4j.LoggerFactory.getLogger(CorsFilter.class);

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        logger.error("CORS filter: " + request.getMethod());
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, xsrf-token");
        response.addHeader("Access-Control-Expose-Headers", "xsrf-token");
        if ("OPTIONS".equals(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            filterChain.doFilter(request, response);
        }
    }
}

在 web.xml 中所有 context-param 之后和 listeners 之前（这是应用程序中唯一的过滤器）：

   <filter>
        <filter-name>springSecurityFilterChain</filter-name>
        <filter-class>web.servlet.response.CorsFilter
        </filter-class>
    </filter>

    <filter-mapping>
        <filter-name>springSecurityFilterChain</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

我在 localhost:8080 上运行后端，在 localhost:8081 上运行前端但是，当我尝试发送带有 application/json 的 POST 请求时，浏览器控制台中出现错误

Access to XMLHttpRequest at 'http://localhost:8080/rpc' from origin 'http://localhost:8081' 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.

另外，我希望在后端看到日志“CORS filter: POST”，我把它放在那里检查它是否会进入过滤器，但没有这样的日志。

请，关于为什么它不起作用的任何建议？ 我需要在请求中坚持使用 application/json，并且有时在应用程序中还有一个 Authorization 标头，因此无法完全避免 cors。 这可能是 Angular 2 的问题吗？

Answer 1

我不熟悉 spring 或 java，但我想我明白这个问题。

我假设您的日志过滤器不起作用，因为 spring 框架在您的过滤器被执行之前短路了该请求。

这里的问题可能出在配置中的某个地方，但我认为解决给定问题的方法通常是不正确的。

CORS 是出于某些目的而创建的，通过允许来自所有其他来源的浏览器的请求，您实际上会产生一些潜在的安全问题。

理想情况下，如果：服务器和客户端都是您的应用程序，则从客户端，您应该仅向托管客户端应用程序的同一来源发出请求。 因此，在您本地的情况下，它应该向localhost:8081发出请求，您可以通过在发出请求时省略客户端的主机基地址来做到这一点。

为了让它工作，对于开发环境，最好的选择是为 angular 设置代理（代理从localhost:8081到localhost:8080请求），详细的设置信息在这里。

对于生产环境，您需要在同一来源上托管后端服务器/客户端应用程序。 您可以通过在后端服务器/客户端 Web 服务器前面设置一些代理服务器，或直接在后端服务器上托管客户端应用程序（角度静态输出文件）来实现。

另一种选择是做您尝试做的事情，但不允许来自所有来源的请求（不是.permitAll() ），而是 - 列出特定的允许来源（如localhost:8081 ）。 但这并不是那么干净，而且您还需要为开发环境和生产指定不同的来源。

Answer 2

这个错误是拒绝OPTION web方法导致的，所以应该在configure方法中添加如下语句：

.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()

像这样：

httpSecurity
            // we don't need CSRF because our token is invulnerable
            .csrf().disable()

            // don't create session
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()

            .authorizeRequests()

            // allow anonymous resource requests
            .antMatchers(HttpMethod.GET,
                    "/",
                    "/*.html",
                    "/favicon.ico",
                    "/**/*.html",
                    "/**/*.css",
                    "/**/*.js")
            .permitAll()
            .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
            .antMatchers(HttpMethod.POST, "/rpc/*").permitAll()
            .anyRequest().permitAll();