zoukankan      html  css  js  c++  java
  • 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, 也就是被拦截了, 没有发出去吧!


    版权声明
    本文原创发表于 博客园,作者为 阿K .     本文欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。
    欢迎关注本人微信公众号:觉醒的码农,或者扫码进群:

  • 相关阅读:
    Luogu P1090 合并果子(优先队列 || priority_queue)
    Luogu P1012 拼数
    hibernate5.2的基本配置
    [bzoj1210][HNOI2004]邮递员【插头dp】
    [bzoj3470]Freda’s Walk【概率与期望dp】
    [bzoj4851][Jsoi2016]位运算【矩阵乘法】【状压dp】
    [bzoj4852][Jsoi2016]炸弹攻击【随机化】
    [bzoj4853][Jsoi2016]飞机调度【最短路】【网络流】
    [bzoj4850][Jsoi2016]灯塔【暴力】
    [bzoj4919][Lydsy1706月赛]大根堆【dp】【启发式合并】【stl】
  • 原文地址:https://www.cnblogs.com/FlyAway2013/p/15604531.html
Copyright © 2011-2022 走看看