403选项AWS中的Cors错误，预检请求

Question

我已将React JS + Spring启动应用程序部署到AWS Cloud。我的React JS项目存储在S3存储桶中，该参考在CloudFront中使用。 Spring Boot应用程序已部署到Elastic Beanstalk Service。

当我尝试从CloudFront发行版向后端提出任何请求时，出现以下403错误OPTIONS错误：

Access to fetch at 'https://api.divelog.eu/getuserdata/eyJhbGciOiJIUzUxMiJ9.eyJsb2dnZWRB' from origin 'https://divelog.eu' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我已经在Spring Boot的服务器端启用了CORS：

@Component
public class CustomCorsFilter extends OncePerRequestFilter {

@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, DELETE, OPTIONS");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Origin, Content-Type, Allow, authorization, content-type, 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);
    }
}
}

also 

@Configuration
@EnableWebSecurity
public class SocialConfig extends WebSecurityConfigurerAdapter {

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.cors().and()
            .csrf().disable()
            .antMatcher("/**")
            .authorizeRequests()
            .antMatchers("/", "/login**", "/webjars/**", "/error**",
                    "/signin", "/getuserdata/**", "/add/marker/**", "/get/markers/**", "/delete/marker/**/**",
                    "/logout/**", "/add/logbook/**/**", "/get/logbook/**", "/logbook/**/**", "/**/**", "/edit/logbook/**/**",
                    "/pdf/logbook/**/**", "/add/topic", "/get/topic/posts/**", "/add/post", "/delete/post/**/**", "/post/**/**",
                    "/delete/post/file/**/**", "/get/topic/number/comments/**/**", "/update/topic/number/displays/**",
                    "/topic/likes/vote/**/**", "/update/topic/**", "/callback", "/signin", "/oauth/request_token")
            .permitAll()
            .anyRequest()
            .authenticated()

            .and()
            .addFilterBefore(new CorsFilter(), ChannelProcessingFilter.class);
}
}

在React JS项目中，我传递给fetch和axios这些标头：Accept，Content-Type。

用于春季启动和React JS的AWS S3存储桶中的我的CORS设置为：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

只有当我尝试从S3存储桶实例向后端API发出make请求时，我会通过corman错误将Spring Boot应用程序部署到Elastic Beanstalk正常工作。

我在弹性beantalk实例的负载均衡器中添加了443和80 HTTP HTTPS端口的侦听器。

您知道为什么我仍然会收到此错误吗？

1. CloudFront行为

Answer 1

我认为您的后端api.divelog.eu仍然没有设置Access-Control-Allow-Origin，您可以在状态代码为403的响应中看到，响应标头中仍然没有Access-Control-Allow-Origin。

此标头必须从后端发送到客户端浏览器，以防止出现错误。

参考： https://javascript.info/fetch-crossorigin