一、了解跨域
什么是跨域?
- 跨域是指浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制
同源策略?
- 是指协议、域名、端口都要相同,但凡其中一项不相同,都会产生跨域
浏览器会将cors请求分成两类:简单请求,非简单请求
简单请求:
(1) 请求方法是以下三种方法之一:
- HEAD
- GET
- POST
(2)HTTP的头信息不超出以下几种字段:
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type:只限于三个值
application/x-www-form-urlencoded
、multipart/form-data
、text/plain
非简单请求:
(1)请求方法是以下方法之一
- PUT
- DELETE
- CONNECT
- OPTIONS
- TRACE
- PATCH
(2)
Content-Type
字段的类型是application/json
对于非简单请求,浏览器在发送请求之前,会发送预前请求OPTIONS
本次操作发送了两次请求,第一次为于预前请求,用于判断当前网页是否在服务器的许可名单中,本例中请求未被许可于是发送失败
二、解决跨域问题
处理跨域问题主要针对响应头进行处理
Access-Control-Allow-Methods :支持哪些跨域方法
Access-Control-Allow-Origin :支持哪些来源的请求跨域
Access-Control-Expose-Headers:跨域请求暴露的字段
Access-Control-Allow-Credentials:跨域请求默认不包含cookie,设置成true可以包含cookie
Access-Control-Max-Age:表明相应的有效期多长时间,在有效期内,再次发送请求无需发送预前请求
处理方法
1)通过CorsWebFilter对象进行处理,只需要将它进行配置然后放入spring容器中就可以起作用
创建一个config类,作为配置文件,切记要添加的两个注解
@Configuration 将类注册为bean容器
@Bean 将方法注入bean中
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
/**
* 处理跨域请求的configuration //注意注解!!!reactive包下的
*/
@Configuration
public class CorsConfigurationS {
//只需要把跨域处理方法放进容器中,就会自动产生作用
@Bean
public CorsWebFilter corsWebFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
// 配置跨越允许任意请求头
corsConfiguration.addAllowedHeader("*");
// 允许任意方法
corsConfiguration.addAllowedMethod("*");
//单独设置允许方法
corsConfiguration.addAllowedMethod("OPTIONS");
corsConfiguration.addAllowedMethod("HEAD");
corsConfiguration.addAllowedMethod("GET");
corsConfiguration.addAllowedMethod("PUT");
corsConfiguration.addAllowedMethod("POST");
corsConfiguration.addAllowedMethod("DELETE");
corsConfiguration.addAllowedMethod("PATCH");
// 允许指定
corsConfiguration.addAllowedOrigin("http://localhost:8001");
// 允许任意请求来源
corsConfiguration.addAllowedOrigin("*");
// 允许携带cookie
corsConfiguration.setAllowCredentials(true);
source.registerCorsConfiguration("/**", corsConfiguration);
return new CorsWebFilter(source);
}
}
2)通过注解@CrossOrigin()快捷完成即可完成跨域,如果不进行配置则表示完全允许跨域,该方法相对来说较为简单,但是只能针对单个控制器,不能实现全局跨域处理