SSM+VUE解决跨域请求(超详细)

---

前言

话不多说,直接把代码贴在下面,如果有兴趣(想划水)的话,可以看后面的详细介绍

// pom文件引入cors-filter
 <!--解决跨域问题-->
  <dependency>
      <groupId>com.thetransactioncompany</groupId>
      <artifactId>cors-filter</artifactId>
      <version>2.5</version>
  </dependency>

// wenb.xml文件配置
  <!--加入跨域过滤器配置-->
    <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

问题解决

---

跨域问题

在前端请求中,当当前页面去请求另一个和当前页面源的协议/端口/域名不一致的请求时,就会出现跨域问题,如下:

协议不一致
https://www.划水摸鱼.com请求http://www.划水摸鱼.com

端口不一致
https://www.划水摸鱼.com:8083请求https://www.划水摸鱼.com8085

域名不一致
https://www.划水摸鱼.com请求https://www.划水摸鱼.net
如上就会出现跨域请求报错的问题,在前后端分离项目中,vue前端有独立的端口,就会导致端口跨域问题.

后台解决方案

CorsConfig注解

新建一个CorsConfig 类代码如下

@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1
        corsConfiguration.addAllowedHeader("*"); // 2
        corsConfiguration.addAllowedMethod("*"); // 3
        return corsConfiguration;
    }
 
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }
}

未完待续…