前端请求进入后端，异常捕获返回结果后前端却显示跨域

1、前言

  后端是 Springboot 项目，通过自定义拦截器进行 token 校验，校验不通过则抛出异常让全局捕获异常返回。自认为逻辑相当合理，且 postman 都已测试过没问题。
  然后问题来了，前端通过 ajax 请求，request 到了后端校验进行 token 校验，抛出了自定义 Token 校验异常后被捕获返回了结果，该请求肆虐了后端这些步骤后返回，但是前端却显示跨域。

Access to XMLHttpRequest at ‘http://192.168.129.155:9999/affairs/api/commons/locker/check’ from origin ‘http://jsrun.net’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

  而后端已经进行了跨域的处理，通过 @CrossOrigin(allowCredentials = “true”) 添加到 BaseController 上。

注： postman 或浏览器直接访问目标地址不是跨域问题。跨域问题是存在两个站点间的调用。

2、代码

2.1 token 拦截器

/**
 * Token 拦截器
 * @author pkyShare
 */
@Slf4j
public class TokenInterceptor implements HandlerInterceptor {

    @Autowired
    YunBasicApiService yunBasicApiService;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object object) throws Exception {
        // 从 http 请求头中取出 token
        String token = request.getHeader("token");
        // 如果不是映射到方法直接通过
        if (!(object instanceof HandlerMethod)) {
            return true;
        }
        HandlerMethod handlerMethod = (HandlerMethod) object;
        Method method = handlerMethod.getMethod();
        // 检查用户权限的注解(带有 @CheckToken 注解的地址都会进行 token 校验)
        if (method.isAnnotationPresent(CheckToken.class)) {
            CheckToken checkToken = method.getAnnotation(CheckToken.class);
            if (checkToken.required()) {
                return checkToken(request, response, token);
            }
        }
        return true;
    }

    /**
     * 校验 token
     * @param request 请求
     * @param token 令牌
     * @return 校验结果，true/通过；false/不通过
     * @throws Exception 可能出现的异常
     */
    private boolean checkToken(HttpServletRequest request, String token) throws Exception {
        // 执行认证
        if (StringUtils.isBlank(token)) {
            log.error(request.getContextPath() + "：token为空");
            throw new TokenException();
        }
        // 基础平台获取用户信息
        UserInfo userInfo = yunBasicApiService.getUserInfo(token);
        if(userInfo == null || StringUtils.isBlank(userInfo.getUserId())) {
            log.error(request.getContextPath() + "：token认证失败：" + token);
            throw new TokenException();
        }
        request.setAttribute("userInfo", userInfo);
        return true;
    }
}

2.2 自定义 token 校验注解

/**
 * 自定义 Token 校验注解
 * @author pkyShare
 */
@Target({ElementType.METHOD, ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
public @interface CheckToken {
    boolean required() default true;
}

2.3 拦截器配置

/**
 * 拦截器路径配置
 * @author pky
 */
@Configuration
public class InterceptorConfig implements WebMvcConfigurer {

    /**
     * 配置拦截路径
     * @param registry 拦截器参考
     */
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        // token 拦截所有请求，通过判断是否有 @CheckToken 注解 决定是否需要校验
        registry.addInterceptor(tokenInterceptor()).addPathPatterns("/**");
    }

    /**
     * token 拦截器注入
     * @return Token 拦截器
     */
    @Bean
    public TokenInterceptor tokenInterceptor() {
        return new TokenInterceptor();
    }
}

2.4 自定义 Token 校验异常

/**
 * 自定义 Token 校验异常
 * @author pkysHARE
 */
public class TokenException extends Exception {

    private static final long serialVersionUID = 845941496134964616L;

    public TokenException() {
        super("Token 无法认证");
    }
}

2.5 全局捕获异常

/**
 * 全局异常捕捉
 * @author pkyShare
 */
@ControllerAdvice
public class GlobalExceptionHandler {

    /**
     * 捕获自定义访问异常处理
     * @param e Token 认证异常
     * @return 错误响应结果
     */
    @ExceptionHandler(TokenException.class)
    public ResponseEntity<Map<String, Object>> tokenException(TokenException e) {
        e.printStackTrace();
        Map<String, Object> map = setResultMap(401, "token 认证失败");
        return new ResponseEntity<>(map, HttpStatus.UNAUTHORIZED);
    }

    /**
     * 捕获全局异常
     * @param e 全局异常
     * @return 错误响应结果
     */
    @ExceptionHandler(Exception.class)
    public ResponseEntity<Map<String, Object>> globalException(Exception e) {
        Map<String, Object> map = setResultMap(500, "服务器异常，请联系管理员：" + e.getMessage());
        e.printStackTrace();
        return new ResponseEntity<>(map, HttpStatus.INTERNAL_SERVER_ERROR);
    }

    /**
     * 设置返回状态码和信息
     * @param code 状态码
     * @param msg  信息
     * @return 错误响应结果
     */
    private Map<String, Object> setResultMap(Integer code, Object msg) {
        Map<String, Object> map = new HashMap<>(16);
        map.put("code", code);
        map.put("msg", msg);
        return map;
    }
}

2.6 Controller

/**
 * 锁控控制器
 * @author pkyShare
 */
@RestController
@RequestMapping(value = "commons/locker")
public class LockerController extends AbstractBaseController {

    @Autowired
    YunBasicApiService yunBasicApiService;

    /**
     * 校验锁控
     * @return BaseResult 通用返回结果
     * @throws Exception 除了自定义异常外，其他一般都为代码错误导致的
     */
    @GetMapping(value = "check")
    @CheckToken
    public BaseResult checkLock() throws Exception {
        return success(yunBasicApiService.checkLocker());
    }
}

3、尝试并解决

3.1 查询资料

  网上查看资料，后端处理很多都说是设置响应头如下：

response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));

  还有在上述代码中的 InterceptorConfig 里重写 WebMvcConfigurer 接口里的 addCorsMappings 方法，如下

@Override
public void addCorsMappings(CorsRegistry registry) {
	registry.addMapping("/**")// 允许跨域访问的路径
	.allowedOrigins("*")// 允许跨域访问的源
	.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")// 允许请求方法
	.maxAge(168000)// 预检间隔时间
	.allowedHeaders("*")// 允许头部设置
	.allowCredentials(true);// 是否发送cookie
}

   然而上述方法都无效。

3.2 猜想并测试

  无法解决后，我就用正确的 token 测试，结果是成功的。然后再次用错误的 token 测试，还是出现一开始的问题。我就想，都是通过拦截器进行校验，正确的返回 true，错误的一般情况下返回 false，而我这里是抛出异常进行全局捕获后返回结果。那会不会是在拦截器抛出异常出现的问题呢？

  然后则修改上述代码中的 TokenInterceptor 拦截器的校验token的方法，改为：不抛异常，校验失败返回 false，然后直接返回 response，在 response 里设置 Access-Control-Allow-Origin，如下：

 /**
     * 校验 token
     * @param request 请求
     * @param token 令牌
     * @return 校验结果，true/通过；false/不通过
     * @throws Exception 可能出现的异常
     */
    private boolean checkToken(HttpServletRequest request, HttpServletResponse response, String token) throws Exception {
        // ----  避免前端出现无法获取返回结果的情况，以下校验不通过不进行抛出异常，直接设置返回 ---- //
        // 执行认证
        if (StringUtils.isBlank(token)) {
            log.error(request.getContextPath() + "：token为空");
            setResultJson(response, "token 不可为空");
            return false;
        }
        // 基础平台获取用户信息
        UserInfo userInfo = yunBasicApiService.getUserInfo(token);
        if(userInfo == null || StringUtils.isBlank(userInfo.getUserId())) {
            log.error(request.getContextPath() + "：token认证失败：" + token);
            setResultJson(response, "token 认证失败");
            return false;
        }
        request.setAttribute("userInfo", userInfo);
        return true;
    }

    /**
     * 设置响应json数据
     * @param response 响应
     * @param msg 返回说明
     * @throws Exception 可能出现的异常
     */
    private void setResultJson(HttpServletResponse response, String msg) throws Exception {
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json;charset=utf-8");
        response.setStatus(HttpStatus.UNAUTHORIZED.value());
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        PrintWriter writer = response.getWriter();
        JSONObject resultJson = new JSONObject();
        resultJson.put("code", 401);
        resultJson.put("msg", msg);
        writer.append(resultJson.toJSONString());

  这样就成功了。

4、待解决

  至于原来的方式无法解决跨域，并不是无法解决。无需经过 token 拦截器的 API 就可以解决，经过 token 拦截器且校验失败的则不行。

  我猜想是因为拦截器中抛出异常，全局捕获后返回的结果在两个域间出现了问题。但具体为啥会这样，还有待研究。