一、什么是跨域问题

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

如图：我们的vue前端项目的端口号为8081，ssm后端项目的端口号为8080，恭喜你出现跨域问题了！

这时，我们可能会想到改vue脚手架的端口号

这当然是不可行的，因为端口号会冲突，那我们应该怎么解决呢？

前后端都可以解决跨域问题，后端简单所以教大家后端解决！！！

二、后端拦截器解决

1.创建跨域拦截器

package com.crm.controller.interceptor;

import org.apache.commons.lang.StringUtils;
import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 跨域拦截器
 * @author : Bei-Zhen
 * @date : 2020-12-25 12:45
 */
public class CrossInterceptor implements HandlerInterceptor {

    /**
     * 预处理
     * @param request
     * @param response
     * @param handler
     * @return
     * @throws Exception
     */
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

        // 不使用*，自动适配跨域域名，避免携带Cookie时失效
        String origin = request.getHeader("Origin");
        if(StringUtils.isNotBlank(origin)) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }

        // 自适应所有自定义头
        String headers = request.getHeader("Access-Control-Request-Headers");
        if(StringUtils.isNotBlank(headers)) {
            response.setHeader("Access-Control-Allow-Headers", headers);
            response.setHeader("Access-Control-Expose-Headers", headers);
        }

        // 允许跨域的请求方法类型
        response.setHeader("Access-Control-Allow-Methods", "*");
        // 预检命令（OPTIONS）缓存时间，单位：秒
        response.setHeader("Access-Control-Max-Age", "3600");
        // 明确许可客户端发送Cookie，不允许删除字段即可
        response.setHeader("Access-Control-Allow-Credentials", "true");
        return true;
    }
}

注意：StringUtils在org.apache.commons.lang包中，应该导入maven依赖坐标

<dependency>
  <groupId>commons-lang</groupId>
  <artifactId>commons-lang</artifactId>
  <version>2.6</version>
</dependency>

2.在springmvc.xml配置文件配置拦截器

	<!--配置拦截器-->
    <mvc:interceptors>
        <mvc:interceptor>
            <!--要拦截的所有方法-->
            <mvc:mapping path="/**"/>
            <!--配置拦截器对象-->
            <bean class="com.crm.controller.interceptor.CrossInterceptor"></bean>
        </mvc:interceptor>
    </mvc:interceptors>

3.重新运行项目，控制台正常打印

4.前端页面状态码也为200！