[JavaScript知识库]前后端分离跨域问题解决方案

/*
没有养成写博客的习惯，时隔半年再次开始。最近在写毕业设计，“流感疫苗预约接种网站” ，我采用的是vue+springboot的前后端分离方式实现功能，在写的过程中遇到了很多问题并且大部分成功解决。
*/

前后端分离跨域解决方案

1.重写WebMvcConfigurer(全局跨域)

public class CorsConfig implements WebMvcConfigurer {`

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            //是否发送Cookie
            .allowCredentials(true)
            //放行哪些原始域
            
        	.allowedOriginPatterns("*")
            .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE","OPTIONS"})
            .allowedHeaders("*")
            .exposedHeaders("*");
	}
                                                  
}

2.在任意配置类，返回一个 新的 CorsFIlter Bean ，并添加映射路径和具体的CORS配置路径。

public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
    //1. 添加 CORS配置信息
    CorsConfiguration config = new CorsConfiguration();
    //放行哪些原始域
    config.addAllowedOrigin("*");
    //是否发送 Cookie
    config.setAllowCredentials(true);
    //放行哪些请求方式
    config.addAllowedMethod("*");
    //放行哪些原始请求头部信息
    config.addAllowedHeader("*");
    //暴露哪些头部信息
    config.addExposedHeader("*");
    //2. 添加映射路径
    UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
    corsConfigurationSource.registerCorsConfiguration("/**",config);
    //3. 返回新的CorsFilter
    return new CorsFilter(corsConfigurationSource);
}
}

/**
ps：我用的是第一种方法，成功解决问题
**/