接上篇，從控制臺(tái)可以看到前端上傳文件的動(dòng)作會(huì)同時(shí)觸發(fā)兩個(gè)請(qǐng)求：options和post

options.png

post.png

并不是因?yàn)閜ost請(qǐng)求token沒帶過(guò)去，從第二張截圖里看到post請(qǐng)求頭帶了token 而是因?yàn)樽铋_始先發(fā)的options請(qǐng)求返回了403，那么后面的post請(qǐng)求則不會(huì)發(fā)出去

簡(jiǎn)單請(qǐng)求:
只要同時(shí)滿足以下條件就屬于簡(jiǎn)單請(qǐng)求
1.請(qǐng)求方法是以下三種方法之一：GET POST HEAD
2.Http的頭信息不超出以下幾種字段：Accept Accept-Language Content-Language Last-Event-ID
3.Content-Type 只限于三個(gè)值application/x-www-form-urlencoded、multipart/form-data、text/plain
非簡(jiǎn)單請(qǐng)求:
其他的請(qǐng)求皆屬于非簡(jiǎn)單請(qǐng)求/預(yù)檢請(qǐng)求.

上傳文件post請(qǐng)求帶的請(qǐng)求頭token是自定義的字段，因此屬于非簡(jiǎn)單請(qǐng)求，會(huì)先發(fā)預(yù)檢請(qǐng)求

OPTIONS
瀏覽器在某些請(qǐng)求中，在正式通信前會(huì)增加一次HTTP查詢請(qǐng)求，稱為"預(yù)檢"請(qǐng)求（preflight）。 OPTIONS方法是用于請(qǐng)求獲得由Request-URI標(biāo)識(shí)的資源在請(qǐng)求/響應(yīng)的通信過(guò)程中可以使用的功能選項(xiàng)。通過(guò)這個(gè)方法，客戶端可以在采取具體資源請(qǐng)求之前，決定對(duì)該資源采取何種必要措施，或者了解服務(wù)器的性能。 該請(qǐng)求方法的響應(yīng)不能緩存。 瀏覽器先詢問服務(wù)器，當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單之中，以及可以使用哪些HTTP動(dòng)詞和頭信息字段。只有得到肯定答復(fù)，瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求，否則就報(bào)錯(cuò)。

跨域請(qǐng)求.png

發(fā)送預(yù)檢請(qǐng)求，服務(wù)端返回的響應(yīng)頭是否允許跨域，允許的話則發(fā)送后續(xù)的post請(qǐng)求。從前端報(bào)錯(cuò)也可以看出：

Access to XMLHttpRequest at 'http://localhost:8077/' from origin 'http://localhost:8099' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

這里考慮在后端代碼options請(qǐng)求時(shí)給響應(yīng)頭加上允許跨域的，后續(xù)的post請(qǐng)求則帶著允許跨域的

response.addHeader("Access-Control-Allow-Origin", "*");

嘗試了這種方式前端報(bào)錯(cuò)了

Access to XMLHttpRequest at 'http://localhost:8077/token/assigncase/' from origin 'http://localhost:8099' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

因?yàn)樯蟼魑募?qǐng)求后端接口需要帶token，:with-credentials=true
允許跨域時(shí)不能帶這種屬性，于是從前端把這一屬性去掉了
之后前端又報(bào)了另一個(gè)錯(cuò)

Access to XMLHttpRequest at 'http://localhost:8077/token/assigncase/' from origin 'http://localhost:8099' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

那就從后端加判斷，當(dāng)預(yù)檢請(qǐng)求是options就返回200成功的狀態(tài)碼

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
            HttpServletRequest req = (HttpServletRequest) request;
            HttpServletResponse rep = (HttpServletResponse) response;

            //設(shè)置允許跨域的配置
            // 這里填寫你允許進(jìn)行跨域的主機(jī)ip（正式上線時(shí)可以動(dòng)態(tài)配置具體允許的域名和IP）
            String origin = req.getHeader("Origin");
            if(origin == null) {
                origin = req.getHeader("Referer");
            }
            // 對(duì)于附帶身份憑證的請(qǐng)求，服務(wù)器不得設(shè)置 Access-Control-Allow-Origin 的值為“*”
            rep.setHeader("Access-Control-Allow-Origin", origin);
            // 表示允許發(fā)送cookie
            rep.setHeader("Access-Control-Allow-Credentials", "true");
            String method = req.getMethod();
            if (method.equals("OPTIONS")) {
                //檢測(cè)是options方法則直接返回200，允許跨域
                rep.setStatus(200);
                return;
//            rep.setHeader("Access-Control-Allow-Origin", "*"); 攜帶token的請(qǐng)求頭，這一步設(shè)置允許特定的地址http://localhost:8099跨域也不管用
            }
            // 允許的訪問方法
            rep.setHeader("Access-Control-Allow-Methods","POST, GET, PUT, DELETE, OPTIONS");
            // Access-Control-Max-Age 用于 CORS 相關(guān)配置的緩存
            rep.setHeader("Access-Control-Max-Age", "3600");
        rep.setHeader("Access-Control-Allow-Headers","token,Origin,X-Requested-With,Content-Type,Accept");

至此問題解決～