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

Question

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

[当我尝试从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。

将用于Spring Boot和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>

当我尝试通过Postman获得对端点的访问权时，仅当我尝试从S3存储桶实例向后端API发出make请求时，我才获得cors错误。

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

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

2. CloudFront行为

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

Answer 1

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