前后端分离跨域咋办？一分钟配置解决！

---

前言

记录一次SpringBoot+Vue后端跨域的简单配置

---

步骤 :

1. 自定义CorsConfig类实现WebMvcConfigurer，重写addCorsMappings(CorsRegistry registry)这个方法

代码如下（可复制）：

package com.shouzhong.epidemicprevention.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author 码不多
 * @version 1.0
 * @description: 跨域配置类
 * @date 2021/8/12 9:42
 */
//声明配置类
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    /**
     * 跨域配置方法
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
            registry
                    //容许跨域的路径
                    .addMapping("/**")   
    }
}

下面这些代码是属于上面的配置类中的属性，但是有了Filter不需要在添加了。

 				//容许跨域的请求域名
                .allowedOrigins("http://前端项目的IP地址:端口号,null") //如 : http://127.0.0.1:8080
                //是否允许携带cookie(参数)
                .allowCredentials(true)
                //放行的哪些请求方式
                .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
                //放行哪些头信息
                .allowedHeaders("*")
                //响应前的缓存时间
                .maxAge(3600);

2. 自定义跨域过滤器类，实现Filter过滤器，重写过滤方法

代码如下（可复制）：

package com.shouzhong.epidemicprevention.config;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author 码不多
 * @version 1.0
 * @description: 跨域过滤器
 * @date 2021/8/13 11:15
 */
@WebFilter("/*")
public class FilterCors implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse resp, FilterChain chain) throws IOException, ServletException
    {
        HttpServletResponse response = (HttpServletResponse) resp;
        response.setHeader("Access-Control-Allow-Origin", "*"); //解决跨域访问报错
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600"); //设置过期时间
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization");
        response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP 1.1.
        response.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0. response.setHeader("Expires", "0");
        chain.doFilter(request, resp);
    }
    @Override
    public void init(FilterConfig filterConfig) {}
    @Override
    public void destroy() {}
}

3. 在Controller层的控制器类上添加注解

@CrossOrigin //注意是类上！！！ 也可以加在方法上，直接使用注解方式配置，不过比较麻烦。

---

总结 : 如果你做到了以上这些，直接访问你的前端项目，只要你的前端访问后端的url没问题，那就完全可以跑起来了。