跨域问题
前后端分离开发
前端Vue
后端springBoot
前端向后端发送请求后会有：
Access to XMLHttpRequest at 'http://192.168.2.222:8082/bop/spaces' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
原因是：被CORS策略阻止，缺少一些http头信息，导致这个响应读取被阻止，其实它是浏览器的一种保护机制，并不是说后端没有接收到请求，后端接收到请求了，并且返回响应结果了。这是因为浏览器的同源策略。
同源策略
协议、域名、端口3个都相同算同源，无跨域问题
例如：
Vue http://localhost:8080
SpringBoot http://localhost:8081
它是一种确保安全的策略
CORS:Cross Origin Resource Sharing跨域资源共享
后端解决跨域问题：
SpringBoot项目中
1.在目标方法中添加@CrossOrigin
2.添加一个CORS过滤器
@Configuration
public class CorsConfig{
@Bean
public CorsFilter corsFilter(){
CoresConfiguration corsConfiguration = new CoresConfiguration();
corsConfiguration.addAllowdOrigin("*");
corsConfiguration.addAllowdHeader("*");
corsConfiguration.addAllowdMethod("*");
urlBasedCorsConfigurationSource source = new urlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**",corsConfiguratio);
return new CorsFilter(source);
}
}
3.实现WebMvcConfigurer接口重写addCorsMappings的方法
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
/**addMapping：配置可以被跨域的路径，可以任意配置，可以具体到直接请求路径。
allowedMethods：允许所有的请求方法访问该跨域资源服务器，如：POST、GET、PUT、DELETE等。
allowedOrigins：允许所有的请求域名访问我们的跨域资源，可以固定单条或者多条内容，如：“http://www.aaa.com”，只有该域名可以访问我们的跨域资源。
allowedHeaders：允许所有的请求header访问，可以自定义设置任意请求头信息。
**/
registry.addMapping("/**")
.allowedOrigins("*")
.allowedHeaders("*")
.allowedMethods("GET", "POST", "DELETE", "PUT", "OPTIONS", "HEAD")
.maxAge(3600);
}
}
| 
发表于 2023-3-8 10:03
