http跨域時的options請求測試

 當發起一次 攜帶 自定義請求頭的http 跨域請求的時候， 瀏覽器就會字段的先發出一個options請求，我的代碼是：

    function testcors() {
        console.log(" jump");
        let location = "http://localhost:8081/emp_files/enumm/addclothesright";
        // location = "http://localhost:8081/emp_files/enumm/";
        // window.location = location;

        xhr.open("get", location, false);
        xhr.setRequestHeader("dddd", 111);
        xhr.send(null);

        if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        }else{
            alert('request was unsuccessful:' + xhr.status);
        }

    }

    setTimeout(
        testcors
        , 2000 );

    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

 

 

跨域看到 實際發出兩個請求： 

 

  

（不知道爲什麼options請求 在正式請求的後面？ ———— 更正！ 反覆測試多次發現， 其實並不是 一定options請求 在正式請求的後面，

而是 隨機出現， 大概是 50% 的概率。 

應該來說， options請求 是先於正式請求 發出的， 而 這個窗口的順序是排列方式可能是 到達的順序， 當 options請求 非常快的時候，  可能瀏覽器也排序不準。

）

 

預檢請求：

 

General：

Request URL: http://localhost:8081/emp_files/enumm/addclothesright
Request Method: OPTIONS
Status Code: 200
Remote Address: [::1]:8081
Referrer Policy: strict-origin-when-cross-origin

 

響應頭：

Access-Control-Allow-Headers: eawww
Access-Control-Allow-Methods: GET,HEAD,POST
Access-Control-Allow-Origin: http://localhost:9999
Access-Control-Max-Age: 1800
Allow: GET, HEAD, POST, PUT, DELETE, OPTIONS, PATCH
Content-Length: 0
Date: Thu, 25 Nov 2021 10:34:04 GMT
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers

請求頭：
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Access-Control-Request-Headers: eawww
Access-Control-Request-Method: GET
Cache-Control: no-cache
Connection: keep-alive
Host: localhost:8081
Origin: http://localhost:9999
Pragma: no-cache
Referer: http://localhost:9999/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36

 

 

正式請求：

General：

Request URL: http://localhost:8081/emp_files/enumm/addclothesright
Request Method: GET
Status Code: 200
Remote Address: [::1]:8081
Referrer Policy: strict-origin-when-cross-origin

 

響應頭：
Access-Control-Allow-Origin: http://localhost:9999
Content-Type: application/json;charset=UTF-8
Date: Thu, 25 Nov 2021 10:34:04 GMT
Transfer-Encoding: chunked
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers

 

請求頭：
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cache-Control: no-cache
Connection: keep-alive
eawww: 111
Host: localhost:8081
Origin: http://localhost:9999
Pragma: no-cache
Referer: http://localhost:9999/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36

 

 

http options 請求異常情況

如果 http跨域時的options請求 不通過呢？ 就會導致 cors error ：

 

 

 

 

可以看到 請求頭是 dddd， ( 請求頭那麼多， 爲什麼 這裏只列出來這一個？ 估計 常見的 通用的 請求頭是 默認被過濾掉了的！  )

 

 

 

 正常請求是 Provisional， 也就是被攔截了， 沒有發出去吧！