什么是跨域
跨域就是前后端分离项目前端无法把session等信息传递给后端服务器。跨域源自浏览器同源策略。同源策略是一种约定,同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。只要两个站点的域名或ip、端口、协议中的任意一个不同就认为是跨域。同源策略是为了保证web应用的安全性,但是会给开发造成麻烦。
解决跨域
ruoyi-vue 项目中使用了cors方式解决跨域问题。
CORS全称为 Cross Origin Resource Sharing(跨域资源共享)。这种方案对于前端来说没有什么工作量,和正常发送请求写法上没有任何区别,工作量基本都在后端这里。每一次请求,浏览器必须先以 OPTIONS 请求方式发送一个预请求(也不是所有请求都会发送 options),通过预检请求从而获知服务器端对跨源请求支持的 HTTP 方法。在确认服务器允许该跨源请求的情况下,再以实际的 HTTP 请求方法发送那个真正的请求。
这样做的好处是:只要第一次配好了,之后不管有多少接口和项目复用就可以了,一劳永逸的解决了跨域问题,而且不管是开发环境还是正式环境都能方便的使用。
在ruoyi-framework中的com.ruoyi.framework.config.ResourcesConfig 类中通过定义CorsFilter来实现。
ResourcesConfig实现了WebMvcConfigurer 接口,可以理解为,实现了这个接口中的方法,我们能自定义SpringMVC的配置。
直接上代码:
/**
* 跨域配置
*/
@Bean
public CorsFilter corsFilter()
{
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
// 设置访问源地址
config.addAllowedOriginPattern("*");
// 设置访问源请求头
config.addAllowedHeader("*");
// 设置访问源请求方法
config.addAllowedMethod("*");
// 有效期 1800秒
config.setMaxAge(1800L);
// 添加映射路径,拦截一切请求
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
// 返回新的CorsFilter
return new CorsFilter(source);
}
这样就解决了跨域问题。
除此之外,还可以通过前端解决跨域问题。比如webpack的proxy 或axios ,具体的不在展开。平时我们自己开发,建议使用cors方式。