问题复现
Access to XMLHttpRequest at 'http://localhost:8081/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
问题原因
出现这个问题的原因就是我的后端没有写好跨域配置,或者说我刚开始不知道跨域如何配置。后端我是用的是Spring boot+Spring Security+Jwt实现的。刚开始我进行了如下配置:
public class AccessControlAllowOriginFilter implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedHeaders("Content-Type","X-Requested-With","accept,Origin","Access-Control-Request-Method","Access-Control-Request-Headers","token")
.allowedMethods("PUT", "DELETE", "GET", "POST", "OPTIONS")
.allowedOrigins("*")
.exposedHeaders("access-control-allow-headers",
"access-control-allow-methods",
"access-control-allow-origin",
"access-control-max-age",
"X-Frame-Options")
.allowCredentials(true);
}
}
//解决跨域问题。cors 预检请求放行,让Spring security 放行所有preflight request(cors 预检请求)
http.authorizeRequests().requestMatchers(CorsUtils::isPreFlightRequest).permitAll();
但是请求还是报错,这两种配置确认无效。
解决办法
在前后端交互的过程中,跨域是最基本的问题,后端可以同意进行跨域处理,前端也可以通过代理进行跨域处理。
我这里采用的是在后端配置跨域请求。
在查看了Spring Security官方文档以后找到了正确的跨域请求方法。
Spring Security关于跨域请求的配置
查看完官方文档以后我进行了如下配置:
@Bean
CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration configuration = new CorsConfiguration();
configuration.addAllowedOrigin("*");//修改为添加而不是设置,* 最好改为实际的需要,我这是非生产配置,所以粗暴了一点
configuration.addAllowedMethod("*");//修改为添加而不是设置
configuration.addAllowedHeader("*");//这里很重要,起码需要允许 Access-Control-Allow-Origin
configuration.setAllowCredentials(true);
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", configuration);
return source;
}
在websecurityconfigure的configure(HttpSecurity http)方法里面还要加上:
http.cors(Customizer.withDefaults());
至此,跨域请求完美解决。
其实跨域请求在第一次请求时浏览器都会先发起一个preflight request,这是要进行如下配置才可以进行跨域访问:
//解决跨域问题。cors 预检请求放行,让Spring security 放行所有preflight request(cors 预检请求)
http.authorizeRequests().requestMatchers(CorsUtils::isPreFlightRequest).permitAll();
有了这些配置前端就可以进行跨域请求了。