跳至主要內容

33. 请求出错时浏览器误报跨域问题

安图新大约 3 分钟

33. 请求出错时浏览器误报跨域问题

前言

项目中定义了跨域过滤器,有些接口请求时出现错误,浏览器上却显示了跨域错误。

一、现象

Access to XMLHttpRequest at 'http://192.168.100.73:7901/demo/ftpFile/upload?project=11&projectVersion=11&relatedSoftware=CppUnit%E8%A2%AB%E6%B5%8B%E4%BB%B6&unit=11&type=document' from origin 'http://192.168.100.73:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
POST http://192.168.100.73:7901/demo/ftpFile/upload?project=11&projectVersion=11&relatedSoftware=CppUnit%E8%A2%AB%E6%B5%8B%E4%BB%B6&unit=11&type=document net::ERR_FAILED

二、跨域过滤器

public class CustomCorsFilter extends CorsFilter {


    private CorsProps corsProps;

    public CustomCrosFilter(CorsConfigurationSource configSource, CorsProps corsProps) {


        super(configSource);
        this.corsProps = corsProps;

    }

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response,
                                    FilterChain filterChain) throws ServletException, IOException {


        response.setHeader("Access-Control-Allow-Origin", corsProps.getOrigin());
        response.setHeader("Access-Control-Allow-Credentials", corsProps.getCredentials());
        response.setHeader("Access-Control-Allow-Methods", corsProps.getMethods());
        response.setHeader("Access-Control-Allow-Headers", corsProps.getHeaders());
        filterChain.doFilter(request, response);
    }

三、分析

1、 通过调试,请求经过跨域过滤器时,响应头中设置了跨域的信息;

2、 请求出现异常时,异常抛给了 web 容器,这里使用的容器是 Undertow,在这里响应头被清理掉了;

					//重置 response
                    response.reset();                       //reset the response
                    exchange.setStatusCode(StatusCodes.INTERNAL_SERVER_ERROR);
                    //清理了响应头
                    exchange.getResponseHeaders().clear();
                    //获取新的请求错误路径
                    String location = servletContext.getDeployment().getErrorPages().getErrorLocation(t);

3、 在找到对应错误页面或默认错误页面后,没有再次通过跨域过滤器设置跨域信息,导致形响应结果中没有带跨域信息,引起浏览器报跨域的错;

四、解决方式

1、 在错误页面中设置跨域信息;

每个方法都调用一下设置跨域信息的方法

@RestController
public class ErrorPageController {



    @Autowired
    private CorsProps corsProps;

    @RequestMapping(value = "/400", produces = {

     MediaType.APPLICATION_JSON_VALUE})
    @ResponseStatus(HttpStatus.BAD_REQUEST)
    public ResponseEntity to400() {


        setCors();
        return new ResponseEntity(400, "请求有误");
    }

    @RequestMapping(value = "/404", produces = {

     MediaType.APPLICATION_JSON_VALUE})
    @ResponseStatus(HttpStatus.NOT_FOUND)
    public ResponseEntity to404() {


        setCors();
        return new ResponseEntity(404, "找不到资源");
    }

    @RequestMapping(value = "/408", produces = {

     MediaType.APPLICATION_JSON_VALUE})
    @ResponseStatus(HttpStatus.REQUEST_TIMEOUT)
    public ResponseEntity to408() {


        setCors();
        return new ResponseEntity(408, "请求超时");
    }

    @RequestMapping(value = "/500", produces = {

     MediaType.APPLICATION_JSON_VALUE})
    @ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR)
    public ResponseEntity to500() {


        setCors();
        return new ResponseEntity(500, "服务器错误");
    }

    public void setCors() {


        HttpServletResponse response = SpringUtils.getResponse();
        String origin = SpringUtils.getRequest().getHeader("Origin");
        response.setHeader("Access-Control-Allow-Origin", origin);
        //服务器同意客户端发送cookies
        response.setHeader("Access-Control-Allow-Credentials", corsProps.getCredentials());

        response.setHeader("Access-Control-Allow-Methods", corsProps.getMethods());
        response.setHeader("Access-Control-Allow-Headers", corsProps.getHeaders());
    }
}

这样错误信息就变成了正常的信息:

POST http://192.168.100.73:7901/demo/ftpFile/unitSearch 400 (Bad Request)
Uncaught (in promise) {

     status: 400, message: "请求有误", desc: null, stackTrace: null, value: null,}

2、 在切面中设置跨域信息;

统一设置跨域信息

@Aspect
@Component
public class CorsAspect {



    @Autowired
    private CrosProps corsProps;

    /**
     * 让切面拦截到 ErrorPageController
     */
    @Pointcut("execution(* com.iscas.biz.config..error..*.*(..))")
    public void errorMethodPointcut() {


    }

    @Around(value = "errorMethodPointcut()")
    public Object around(final ProceedingJoinPoint joinPoint) throws Throwable {



        HttpServletResponse response = SpringUtils.getResponse();
        String origin = SpringUtils.getRequest().getHeader("Origin");
        response.setHeader("Access-Control-Allow-Origin", origin);
        //服务器同意客户端发送cookies
        response.setHeader("Access-Control-Allow-Credentials", corsProps.getCredentials());

        response.setHeader("Access-Control-Allow-Methods", corsProps.getMethods());
        response.setHeader("Access-Control-Allow-Headers", corsProps.getHeaders());

        Object result = joinPoint.proceed();
        return result;
    }
}

3、 在请求错误页面 ErrorPageController 时通过跨域过滤器;

在跨域过滤器中重写 OncePerRequestFilter 的 shouldNotFilterErrorDispatch( )方法,让错误请求进入跨域过滤器设置跨域信息。

/**
     * 错误请求,是否不进入该过滤器
     * 默认为true,错误请求不会进入该过滤器,修改为false
     */
    protected boolean shouldNotFilterErrorDispatch() {


        return false;
    }

上次编辑于:
贡献者: Andy