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

最新推荐文章于 2023-10-25 17:16:47 发布
最新推荐文章于 2023-10-25 17:16:47 发布
阅读量2k 收藏 6
点赞数 1
分类专栏： 常见问题 文章标签： 后端 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34369588/article/details/120886977
版权

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 拦截器且校验失败的则不行。

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

PkyShare
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
自定义请求头（token等）后预检请求被服务器拒绝（报跨域）的解决方法
XD_NML的博客
11-22 2394
起因：由于在自定义请求头后请求会从简单请求转变为复杂请求，（详情可以查看阮一峰先生的博客）复杂请求会提前发送一个预检请求与服务器进行沟通，大概类似于（预检请求：“我可以访问吗？”=>服务器：“可以” =>真实请求）,这里有个坑，因为无论服务器是否允许请求，options请求（预检请求）的状态码反馈都是200ok，最开始没反应过来，服务器拒绝了options请求并且报跨域，但是options请求一直都是200ok，导致一直在看真实请求的问题出在哪还有后端是不是没有配置跨域。最简单的方法是看看op.
nodejs——解决跨域问题
@er
10-10 5474
1什么是跨域 2解决 1 jsonp(缺点：不能请求post请求） 2服务端代理 （由于后端请求不受浏览器同源策略影响，将前端跨域请求放在后端）
Postman调用接口正常，前端页面调用报跨域
m0_50137812的博客
10-25 3362
2.2、由于POST接口，在实际调用前会有一个预调用（OPTIONS类型），该调用正常响应才会实际调接口，所以可以设置OPTIONS类型的接口放行也可以（这个没试过不清楚有没有效，推荐还是配置CorsFilter，配置完CorsFilter后可以不用配置addCorsMapping）：由于请求处理的顺序问题导致的。当请求打到后端时，是先被拦截器拦截处理的，也就是我们配置的addCrosMappings并没有起到作用，请求直接被拦截器拦截了，而由于此时请求还没有配置跨域信息，所以就出现了跨域问题。
后端配置了跨域配置前端访问还是提示跨域
陌子曦的专栏
10-21 4643
跨域解决
后端允许跨域后，前端访问仍然存在跨域问题
qq_45634989的博客
07-07 7561
后端允许跨域后，前端访问仍然存在跨域问题
js前端解决跨域问题的8种方案（最新最全）
10-21
- **代理服务器(Proxy Server)**：在服务器端设置一个代理，将跨域请求转发到目标服务器，返回结果后再转发回客户端。这种方式可以避免修改后端代码，但需要额外的服务器资源。 - **WebSocket跨域**：WebSocket...
前端性能与异常上报
01-27
在软件开发中，无论是前端还是后端，性能监控和异常处理都是至关重要的环节。前端性能与异常上报是为了确保用户体验的顺畅以及及时发现并解决问题。在本文中，我们将深入探讨前端性能监控、异常捕获策略以及相关的...
java常见问题前端js和后端
10-08
Java后端通过抛出和捕获异常，前端通过Promise或async/await处理异步错误。返回合适的HTTP状态码和错误信息有助于调试和用户体验。 6. **安全性**：Java后端需要处理SQL注入、XSS攻击等安全问题，可以使用预编译...
PrimeConnectUI:前端连接到后端服务
05-25
6. **错误处理**：前端需要处理可能出现的网络错误、API错误等，通过设置错误回调或者使用try/catch语句来捕获和处理异常。 7. **跨域问题**：由于浏览器的安全策略，前端直接向不同源发起请求可能会遇到跨域问题。...
前端实现大文件的上传操作
最新发布
03-14
前端应该捕获并处理可能出现的错误，如网络中断、服务器返回错误代码等，并向用户提供友好的错误提示。 9. 服务器端处理： 后端需要处理接收分块数据，存储每个块，然后在所有块上传完成后进行重组。这可能涉及到...
神坑——后端允许了跨域但是前端（vue3+vite+axios）仍然提示跨域
lsjweiyi的博客
05-08 1万+
这个问题坑了我整整一个晚上。·这明明是个非常常见的问题，我自己也遇到好多次了，以前都是后端允许跨域就可以了。但是这次就是不行！ 首先晚上最多的方案是用代理，例如这篇：https://blog.csdn.net/admin_web/article/details/121924527 我一晚上也主要在按照这些方法去尝试，但是我努力一个晚上，都不行，一直怀疑是自己的姿势不对！最后在快要放弃前（12点多，不清醒了），瞎猫碰上死耗子，居然解决了。 不是配置问题！ PS:我的后端用go写的，这里也贴一下我的允许跨域：
前端请求出现跨域，明明后端已经解决了？
zulvyinggaitong的博客
08-15 2125
跨域问题 跨域问题的解决前端后端都有，我觉得最简单的还是后端解决。比如 koa 中一个 koa-cors 插件就能解决。具体跨域产生原因以及解决原理在此不细说…… 后端已经解决跨域但是前端请求时仍报跨域错误 将写好的项目部署到服务器上，后端采用的是 koa ，跨域用的 koa-cors。明明后端已经解决了跨域但是请求时还是给我报跨域错误，这种 google 是很难搜到的，反正我没搜到…… 经过一番排查问题，我发现是因为后端没有启动的原因。可是 pm2 明明显示开启状态。就是这里迷惑了我。我改完nginx配置
简单java跨域配置文件
phillip629的博客
09-12 520
import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.sprin...
NC65开发遇到的问题
u010741112的博客
05-30 1007
当接收方是公司下的主体帐簿时，如编码为“yy”名称为“yk”主键为“1046”的公司下有一编码为“yy-0001”名称为“yy公司基准帐簿”的主体帐簿时，根据外部交换平台总体参数设置中的接收公司匹配规则可将接收方属性设置为receiver=yy@yy-0001或者receiver=1046@yy-0001。除非从其他NC系统产生的符合NC转换后标准的XML数据直接导入NC系统，并且很多基础档案数据字段直接用的是PK值，此时可以设置属性为“N”和“n”，可避免无谓的翻译转换。（对应nc系统中的那个单据类型）
【nodejs】解决前后端跨域问题
小绵杨
04-09 3566
一、问题 前后端分离，特别是使用nodejs作为后端，肯定会存在跨域问题的，因为node项目运行需要占一个端口。在开发环境中，可以使用vue的跨域解决办法，即配置vue.config.json进行请求配置，实现请求代理。 Vue项目实现跨域请求（无config文件夹） 但是将项目上线到服务器以后，这个办法就没用了，所以得通过后端进行配置，从而实现能够跨域请求。 二、方法2：设置express var express = require('express'); var app = express(); //跨
后端已经允许了跨域，前端依然报跨域错误，研究一下 Access-Control-Allow-Credentials...
热门推荐
weixin_33774615的博客
05-17 1万+
即使后端已经允许了跨域，但是前端依然报一个跨域错误。 Access to XMLHttpRequest at 'http://localhost/api/admin/authorizations' from origin 'http://localhost:9528' has been blocked by CORS policy: Response to preflight request...
后端处理跨域问题
weixin_45642418的博客
02-08 142
【代码】后端处理跨域问题。
后台已设置允许跨域，但前台依然报跨域问题
amine520的博客
12-21 5730
后台已经设置允许跨域，但是前台依然报错。 public class CorsFilter implements Filter{ @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException { HttpServletRequest request = (
vue-cli4 解决向后端请求出现跨域问题（跨域代理）
yan_danfeng的博客
07-10 2974
在项目根目录下创建vue.config.js文件 代码如下 module.exports = { // 配置跨域代理 devServer: { // Paths host: 'localhost', port: '8080', https: false, open: true, proxy: { '/api': { // 匹配所有以 '/api'开头的请求路径
模块化开发时前端如何请求后端并不发生跨域问题
02-26
在模块化开发时，前端需要向后端请求数据或资源，可以使用以下方法避免跨域问题： 1. 将前端代码和后端代码部署在同一个域名下，这样就不会出现跨域问题。 2. 如果前端代码和后端代码需要分别部署在不同的域名下，可以在后端添加 CORS（跨域资源共享）头部信息，允许特定的域名访问该接口。前端请求时需要指定相应的头部信息。 3. 如果后端没有开启 CORS 功能，前端可以通过在同一域名下设置反向代理来避免跨域问题。将前端请求发送给同一域名下的代理服务器，由代理服务器向后端发送请求并返回结果给前端。这样就避免了前端直接访问跨域的后端接口。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值