记录一次使用token遇到的跨域问题

一、问题介绍

前端vue使用axios发送请求，给每个请求的请求头添加token，后端使用Javaweb的filter处理跨域问题

1. 一开始是这样处理跨域的，登录的时候挺正常的，token获取到了

CORSFilter.java

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        System.out.println("设置跨域请求");
        HttpServletResponse response = (HttpServletResponse) resp;

        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET,OPTIONS");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, authorization, X-Requested-With");
        response.setHeader("Access-Control-Expose-Headers", "authorization");

        chain.doFilter(req, resp);
    }

2. 当开始发送除登录以外的请求时，报错了

Access to XMLHttpRequest at ‘http://localhost/checkAllDynamic’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

而且查看network时发现有两个请求

经过网上查找了解到：

当浏览器发送非简单请求时，浏览器会先发送一次预请求(Preflight)，即图中的options请求，用于判断服务器是否允许该次请求，如果没有返回200则会报401错误，即题干所示错误

options详解：

浏览器访问控制机制CORS将请求分为简单请求和非简单请求，当发送非简单请求时会发送一次预请求，即options请求

简单请求：
满足以下条件的请求：

• GET，POST，HEAD请求中的一种
• 除请求头中默认的，程序员仅增加Accept，Accept-Language，Content-Type等
• content-type只能是application/x-www-form-urlencoded，multipart/form-data，text/plain中的一种

非简单请求：不满足简单请求的请求，如token校验中自定义给请求头增加了authorization

二、问题解决

尝试的解决方法：

• 当我尝试使用response.setStatus(HttpServletResponse.SC_OK)解决时，依然报错，没有返回200，返回401
• 当我尝试直接使用chain.doFilter(req, resp)时依然保错，即最开始出现问题时的做法

经过网上查询发现，直接return就能放行

正确方法：

判断是否为options请求，如果是直接返回

        if (request.getMethod().equals("OPTIONS")){
           return;
        }

return不能放在设置请求头之前，不然会报如下错误

三、总结

对浏览器访问控制的机制有了更详细的认识：

• 知道了什么是跨域
• 了解了options请求

知道如何解决跨域问题：

• CORS：在后端过滤器给response设置相关的请求头

实力有限，欢迎讨论！