記錄一次使用token遇到的跨域問題

一、問題介紹

前端vue使用axios發(fā)送請求，給每個(gè)請求的請求頭添加token，后端使用Javaweb的filter處理跨域問題

1. 一開始是這樣處理跨域的，登錄的時(shí)候挺正常的，token獲取到了

CORSFilter.java

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        System.out.println("設(shè)置跨域請求");
        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. 當(dāng)開始發(fā)送除登錄以外的請求時(shí)，報(bào)錯(cuò)了

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時(shí)發(fā)現(xiàn)有兩個(gè)請求

經(jīng)過網(wǎng)上查找了解到：

當(dāng)瀏覽器發(fā)送非簡單請求時(shí)，瀏覽器會(huì)先發(fā)送一次預(yù)請求(Preflight)，即圖中的options請求，用于判斷服務(wù)器是否允許該次請求，如果沒有返回200則會(huì)報(bào)401錯(cuò)誤，即題干所示錯(cuò)誤

options詳解：

瀏覽器訪問控制機(jī)制CORS將請求分為簡單請求和非簡單請求，當(dāng)發(fā)送非簡單請求時(shí)會(huì)發(fā)送一次預(yù)請求，即options請求

簡單請求：
滿足以下條件的請求：

• GET，POST，HEAD請求中的一種
• 除請求頭中默認(rèn)的，程序員僅增加Accept，Accept-Language，Content-Type等
• content-type只能是application/x-www-form-urlencoded，multipart/form-data，text/plain中的一種

非簡單請求：不滿足簡單請求的請求，如token校驗(yàn)中自定義給請求頭增加了authorization

二、問題解決

嘗試的解決方法：

• 當(dāng)我嘗試使用response.setStatus(HttpServletResponse.SC_OK)解決時(shí)，依然報(bào)錯(cuò)，沒有返回200，返回401
• 當(dāng)我嘗試直接使用chain.doFilter(req, resp)時(shí)依然保錯(cuò)，即最開始出現(xiàn)問題時(shí)的做法

經(jīng)過網(wǎng)上查詢發(fā)現(xiàn)，直接return就能放行

正確方法：

判斷是否為options請求，如果是直接返回

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

return不能放在設(shè)置請求頭之前，不然會(huì)報(bào)如下錯(cuò)誤

三、總結(jié)

對瀏覽器訪問控制的機(jī)制有了更詳細(xì)的認(rèn)識：

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

知道如何解決跨域問題：

• CORS：在后端過濾器給response設(shè)置相關(guān)的請求頭

實(shí)力有限，歡迎討論！