什么是跨域问题?
当一个请求的url的协议,域名,端口三者之间任意一个与当前页面url不同 即为跨域
问题背景:
如图,前端端口为8090,而后端端口为8099,形成跨域,无法对接
试图利用SpringBoot解决该问题
添加CORS过滤器:新建配置类CorsConfig:创建CorsFilter过滤器,允许跨域
java
@Configuration
public class CrosConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET","POST","HEAD","PUT","DELETE","OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
java
@Configuration
public class GlobalCorsConfig {
/**
* 允许跨域调用的过滤器
*/
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
//允许所有域名进行跨域调用
config.addAllowedOrigin("*");
//允许跨越发送cookie
config.setAllowCredentials(true);
//放行全部原始头信息
config.addAllowedHeader("*");
//允许所有请求方法跨域调用
config.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}
以上两段代码尝试后,均报以下错误:
获取不到token值:
即:后端配置了跨域过滤器,但还是造成了跨域问题
问题解决:
发现vue发起的两遍请求,第二遍不带token
跨域问题从写好跨域过滤器后 本质上就已经解决了,所以无需更改跨域过滤器
更改前端端口号 如下:info仍在报错
一通排查,发现是后端代码问题:
在SecurityConfig中将"/admin/info"添加到白名单中
终于!!
得到最终token
如果还有问题,前后端对照,vue2.0的一个特性是会自动发起info请求,检查后端逻辑代码中是否有接口接收并处理info