前后端分离系列--05--Spring Boot+Vue 前后端分离-项目搭建+跨域解决——核心002_前后端分离的项目怎么设置过滤器的顺序-优快云博客

该博客是跨域问题解决的入门教程，提到之前参考WebMvcConfigurer、WebMvcConfigurationSupport等方法行不通，最终用Filter解决。前台只需在main.js头部添加内容，后台启动类代码加@ServletComponentScan，还需有过滤器类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很好的入门教程【跨域部分行不通】

https://segmentfault.com/a/1190000014211773

跨域问题的解决：

什么 JB WebMvcConfigurer，WebMvcConfigurer，WebMvcConfigurationSupport

【参考 https://www.cnblogs.com/xingzc/p/8656088.html】统统行不通，最终用下文的 Filter 搞定

https://blog.youkuaiyun.com/qq_39313596/article/details/82592809

前台：只需要在 main.js 头部加上。【前端config下的index.js 不需要改】

// 引用axios，并设置基础URL为后端服务api地址
var axios = require('axios')
axios.defaults.timeout = 5000
axios.defaults.baseURL = 'http://localhost:8087/api'

// 将API方法绑定到全局
Vue.prototype.$axios = axios
Vue.config.productionTip = false

后台：

1、启动类代码加上 @ServletComponentScan

2、过滤器类

package com.spring.mybatis.filter;
 
import org.springframework.core.annotation.Order;
 
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
 
/**
 * 跨域的设置问题
 * @author tonywu
 * @version v1.0.0
 */
 
//@Component   //在启动类加了@ServletComponentScan无需加这个了
@Order(3)//设置优先级加载
//@ServletComponentScan  //加载启动类上了
@WebFilter(urlPatterns = "/*",filterName = "ACAFilter")
public class ACAFilter implements Filter {
 
    /**
     * 初始化
     * @param filterConfig FilterConfig
     * @throws ServletException
     */
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
 
    /**
     * 过滤
     * @param servletRequest
     * @param servletResponse
     * @param filterChain
     * @throws IOException
     * @throws ServletException
     */
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse)servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        //response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", ":x-requested-with,content-type");
        //((HttpServletResponse)servletResponse).setHeader("Access-Control-Allow-Origin", "*");
        filterChain.doFilter(servletRequest,servletResponse);
        System.out.println("to access control allow origin");
    }
 
    /**
     * 销毁
     */
    @Override
    public void destroy() {
    }
}