刚开始不做任何配置时 , 通过VUE调用SB的接口 , 就会报错:“…has been blocked by CORS policy”
什么意思?
后端实际上已经接收到请求 , 也完成了处理 , 返回了处理后的数据 , 但被浏览器拦截了.
浏览器为什么拦截?
浏览器的同源策略 : 限制不同源之间的交互 , 以避免不同源的攻击 . 必须符合同源策略的请求 , 才能相互访问
什么是同源策略?
协议+域名+端口 , 三个都相同时才为同源.
现在知道为什么访问不了了:
由于前后端分离 , 故两端的访问端口不一样 . VUE项目默认启动在8181端口 , 而SB默认启动在8080端口 , 不符合同源策略.
CORS跨域资源共享 , 实质由许多HTTP头组成
解决办法:
package com.sunsplanter.utils;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
@Bean
//返回一个corsFilter过滤器
//创建过滤器需要一个参数:对象source ,
// source需要注册一个corsConfiguration
//corsConfiguration需要声明规则
public CorsFilter corsFilter(){
CorsConfiguration corsConfiguration = new CorsConfiguration();
//*为通配符 , 表示允许所有请求域通过
corsConfiguration.addAllowedOrigin("*");
//*为通配符 , 表示允许所有请求头通过
corsConfiguration.addAllowedHeader("*");
//*为通配符 , 表示允许所有请求方法通过
corsConfiguration.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**",corsConfiguration);
return new CorsFilter(source);
}
}
IoC自动装配 , 无需再次调用 ,该全局规则会自动生效 .