Вы столкнулись с проблемой, потому что вы допустили cors на своем бэкенде от порта 8080, но ваша реакция на порту 3000 на локальном. Так, springboot не примет запрос, поскольку он приходит с другого адреса порта.
Метод 1:
Вы можете избежать неприятностей, используя аннотацию, такую как:
@CrossOrigin(origins = "http://localhost:3000", maxAge = 3600)
Поскольку вы используете springboot, вы также можете использовать следующую глобальную конфигурацию, чтобы определить, какие домены имеют доступ к вашему бэкэнду.
@Configuration
public class MyConfiguration {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:3000")
.allowedMethods("PUT", "DELETE", "GET", "POST") //or allow all as you like
.allowedHeaders("header1", "header2", "header3")
.exposedHeaders("header1", "header2")
.allowCredentials(false).maxAge(3600);
}
};
}
}
и если у вас все еще есть проблемы, это может быть связано с тем, что система безопасности Spring не добавляет заголовки CORS , как Access-Control-Allow-Origin, в ваш заголовок ответа . В этом случае вы можете определить собственный фильтр CORS и добавить его в систему безопасности Spring, чтобы заголовки ответов CORS были установлены для всех конечных точек безопасности Spring. Вы можете создать bean-компонент фильтра, например:
public class CorsFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) servletResponse;
HttpServletRequest request= (HttpServletRequest) servletRequest;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "GET,POST,DELETE,PUT,OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Credentials", true);
response.setHeader("Access-Control-Max-Age", 180);
filterChain.doFilter(servletRequest, servletResponse);
}
@Override
public void destroy() {
}
}
Метод 2:
, поскольку вы используете пружинную защиту , вы также можете добавить конфигурацию CORS вместе с пружинной защитой, например:
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.cors().and()
//other configurations that you want
}
@Bean
CorsConfigurationSource corsConfigurationSource()
{
CorsConfiguration configuration = new CorsConfiguration();
configuration.setAllowedOrigins(Arrays.asList("*"));
//or any domain that you want to restrict to
configuration.setAllowedMethods(Arrays.asList("GET","POST"));
//Add the method support as you like
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", configuration);
return source;
}
}
Spring security будет принимать конфигурацию CORS, даже если вы предоставите ее, как в методе 1, насколько мне известно. Но в документации Spring они также предусмотрели этот способ регистрации CORS с защитой Spring.
В прикрепленном журнале консоли , который вы прикрепили, говорится, что проверка перед полетом не удалась из-за возврата http-статуса, не в порядке. Так что вы можете попробовать зарегистрировать cors, как метод 2, и добавить фильтр так что заголовки добавляются правильно в ответ. Springboot блокирует предполетную проверку при входе на страницу входа. Вам необходимо правильно настроить ваши cors с помощью Spring Security, чтобы разрешить доступ к странице входа из другого порта.
Подтвердите, что на вашей странице входа в систему /login сопоставление разрешено CORS
Официальный Док
Справочник Документ