06-若依前后端分离项目跨域问题解决方式

什么是跨域

跨域就是前后端分离项目前端无法把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方式。