記錄一次使用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設置相關的請求頭

實力有限，歡迎討論！