跨域请求测试代码-图片视频自动播放

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CORS跨域测试</title>
<!--1.引用js脚本和css样式表 并放置在<head> 标签中。-->
<!--<link rel="stylesheet" href="static/mediaelementplayer.css" />-->
<!--<script src="static/mediaelement-and-player.min.js"></script>-->
</head>

<body>
    <div><input type="text" id="cors_url" placeholder="请输入测试url">
        <input type="text" id="methodid" placeholder="请求方法：get/post/delete/put/head">
        <input type="submit" value="点此测试跨域" onclick="testcors('cors_url','result1')">
        <span id="result1" style="font-weight: 800 ;font-size: 25px" >【图片/视频 跨域请求成功将自动播放】</span>
    </div>
   <div>
      <img id="img1" ><span id="span1"></span>
   </div>

        <video id="video1"    width="320" height="240" ></video>
        <!-- controls="controls" -->

        <!--flash回退-->
        <!--为了支持低版本的浏览器以及对不同用户群的支持，MediaElement.js提供了flash回退的方式，你可以采用以下代码进行调用-->
        <!--<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">-->
            <!--&lt;!&ndash; MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 &ndash;&gt;-->
            <!--<source type="video/mp4" src="myvideo.mp4" />-->
            <!--&lt;!&ndash; WebM/VP8 for Firefox4, Opera, and Chrome &ndash;&gt;-->
            <!--<source type="video/webm" src="myvideo.webm" />-->
            <!--&lt;!&ndash; Ogg/Vorbis for older Firefox and Opera versions &ndash;&gt;-->
            <!--<source type="video/ogg" src="myvideo.ogv" />-->
            <!--&lt;!&ndash; Optional: Add subtitles for each language &ndash;&gt;-->
            <!--<track kind="subtitles" src="subtitles.srt" srclang="en" />-->
            <!--&lt;!&ndash; Optional: Add chapters &ndash;&gt;-->
            <!--<track kind="chapters" src="chapters.srt" srclang="en" />-->
            <!--&lt;!&ndash; Flash fallback for non-<span class="wp_keywordlink_affiliate"><a href="http://www.dglives.com/tag/html5" title="查看HTML5中的全部文章" target="_blank">HTML5</a></span> browsers without JavaScript &ndash;&gt;-->
            <!--<object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">-->
                <!--<param name="movie" value="flashmediaelement.swf" />-->
                <!--<param name="flashvars" value="controls=true&file=myvideo.mp4" />-->
                <!--&lt;!&ndash; Image as a last resort &ndash;&gt;-->
                <!--<img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />-->
            <!--</object>-->
        <!--</video>-->

</body>

<script>
    //判断各种浏览器兼容,用不同方法open 测试url
    function createCORS(method, url){
        var xhr = new XMLHttpRequest();
        if('withCredentials' in xhr){
            console.log('xhr = new XMLHttpRequest()');
            xhr.open(method, url, true);
        }else if(typeof XDomainRequest != 'undefined'){
            console.log('xhr = new XDomainRequest()');
            var xhr = new XDomainRequest();
            xhr.open(method, url);
        }else{
            xhr = null;
        }
        return xhr;
    }
    //点击按钮再进行浏览器跨域动作测试
    function testcors(corsurlid,resultid) {
        var test_url = document.getElementById(corsurlid).value;
        var request_method = document.getElementById('methodid').value;
        console.log('测试url：',test_url);
        console.log('测试方法：',request_method);
        //请求开始
        var request = createCORS(request_method, test_url);
         if(request){
             request.responseType = "blob";
             request.onload = function(){
                 var result1 = document.getElementById(resultid);
                 var Content_Type  = request.getResponseHeader('Content-Type');
                 console.log(" 请求动作被允许  Response Content-Type:", Content_Type ,"视频自动播放,图片自动展示");
                 var blob = this.response;
                 result1.setAttribute('style',"color: green;font-weight: 800 ;font-size: 25px");

                 if (Content_Type.indexOf('video')  != -1 ){    //视频播放
                     var video1 = document.getElementById('video1');
                     video1.setAttribute( 'controls',"controls");
                     video1.src = window.URL.createObjectURL(blob);
                     video1.play();
                     result1.innerHTML = '跨域请求动作OK!&nbsp;&nbsp;&nbsp;Response Content-Type:' + Content_Type + "&nbsp;&nbsp;&nbsp;&nbsp;这是视频哎！！！播放一把!";
                 }else if (Content_Type.indexOf('image')  != -1 ){      //图片播放
                     var img = document.getElementById('img1');
                     img.src = window.URL.createObjectURL(blob);
                     result1.innerHTML = '跨域请求动作OK!&nbsp;&nbsp;&nbsp;Response Content-Type:' + Content_Type + "&nbsp;&nbsp;&nbsp;&nbsp;这是图片哎！！！让我看看!";
                 }

             };
             request.onabort = function(){
                 console.log('跨域请求失败');
                 result1.setAttribute('style',"color: red; font-size:30");
                 result1.innerHTML = "跨域请求失败!!!";
             };  //跨域失败动作
             request.send();    //发送请求

         }else { 
             result1.setAttribute('style',"color: red; font-size:30");
             result1.innerHTML = "该浏览器不支持跨域!!!";
             console.log('该浏览器不支持跨域')
         }
    }
</script>

</html>
复制代码

 2020 02 27更新

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CORS跨域测试</title>
<!--1.引用js脚本和css样式表 并放置在<head> 标签中。-->
<!--<link rel="stylesheet" href="static/mediaelementplayer.css" />-->
<!--<script src="static/mediaelement-and-player.min.js"></script>-->
</head>

<body>
    <div><input type="text" id="cors_url" placeholder="请输入测试url">
        <input type="text" id="methodid" placeholder="请求方法：get/post/delete/put/head">
        <input type="text" id="resType" placeholder="responseType：text/blob(图片/视频填写)">
        <input type="submit" value="点此测试跨域" onclick="testcors('cors_url','result1')">
        <span id="result1" style="font-weight: 800 ;font-size: 25px" >【图片/视频 跨域请求成功将自动播放】</span>
    </div>
   <div>
      <img id="img1" ><span id="span1"></span>
       <a id="json1"></a>
   </div>

        <video id="video1"    width="320" height="240" ></video>
        <!-- controls="controls" -->

        <!--flash回退-->
        <!--为了支持低版本的浏览器以及对不同用户群的支持，MediaElement.js提供了flash回退的方式，你可以采用以下代码进行调用-->
        <!--<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">-->
            <!--&lt;!&ndash; MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 &ndash;&gt;-->
            <!--<source type="video/mp4" src="myvideo.mp4" />-->
            <!--&lt;!&ndash; WebM/VP8 for Firefox4, Opera, and Chrome &ndash;&gt;-->
            <!--<source type="video/webm" src="myvideo.webm" />-->
            <!--&lt;!&ndash; Ogg/Vorbis for older Firefox and Opera versions &ndash;&gt;-->
            <!--<source type="video/ogg" src="myvideo.ogv" />-->
            <!--&lt;!&ndash; Optional: Add subtitles for each language &ndash;&gt;-->
            <!--<track kind="subtitles" src="subtitles.srt" srclang="en" />-->
            <!--&lt;!&ndash; Optional: Add chapters &ndash;&gt;-->
            <!--<track kind="chapters" src="chapters.srt" srclang="en" />-->
            <!--&lt;!&ndash; Flash fallback for non-<span class="wp_keywordlink_affiliate"><a href="http://www.dglives.com/tag/html5" title="查看HTML5中的全部文章" target="_blank">HTML5</a></span> browsers without JavaScript &ndash;&gt;-->
            <!--<object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">-->
                <!--<param name="movie" value="flashmediaelement.swf" />-->
                <!--<param name="flashvars" value="controls=true&file=myvideo.mp4" />-->
                <!--&lt;!&ndash; Image as a last resort &ndash;&gt;-->
                <!--<img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />-->
            <!--</object>-->
        <!--</video>-->

</body>

<script>
    //判断各种浏览器兼容,用不同方法open 测试url
    function createCORS(method, url){
        var xhr = new XMLHttpRequest();
        if('withCredentials' in xhr){
            console.log('xhr = new XMLHttpRequest()');
            xhr.open(method, url, true);
        }else if(typeof XDomainRequest != 'undefined'){
            console.log('xhr = new XDomainRequest()');
            var xhr = new XDomainRequest();
            xhr.open(method, url);
        }else{
            xhr = null;
        }
        return xhr;
    }
    //点击按钮再进行浏览器跨域动作测试
    function testcors(corsurlid,resultid) {
        var test_url = document.getElementById(corsurlid).value;
        var request_method = document.getElementById('methodid').value;
        console.log('测试url：',test_url);
        console.log('测试方法：',request_method);
        //请求开始
        var request = createCORS(request_method, test_url);
         if(request){
             var   restype = document.getElementById('resType').value;
             request.responseType = restype;
             request.onreadystatechage = function(){
                 var Content_Type  = request.getResponseHeader('Content-Type');
                 console.log("请求状态发生改变  Response Content-Type:", Content_Type)
             };
             request.onload = function(){
                 var result1 = document.getElementById(resultid);
                 var Content_Type  = request.getResponseHeader('Content-Type');
                 console.log(" 请求动作被允许  Response Content-Type:", Content_Type ,"视频自动播放,图片自动展示");
                 var blob = this.response;
                 result1.setAttribute('style',"color: green;font-weight: 800 ;font-size: 25px");

                 if (Content_Type.indexOf('video')  != -1 ){    //视频播放
                     var video1 = document.getElementById('video1');
                     video1.setAttribute( 'controls',"controls");
                     video1.src = window.URL.createObjectURL(blob);
                     video1.play();
                     result1.innerHTML = '跨域请求动作OK!&nbsp;&nbsp;&nbsp;Response Content-Type:' + Content_Type + "&nbsp;&nbsp;&nbsp;&nbsp;这是视频哎！！！播放一把!";
                 }else if (Content_Type.indexOf('image')  != -1 ){      //图片播放
                     var img = document.getElementById('img1');
                     img.src = window.URL.createObjectURL(blob);
                     result1.innerHTML = '跨域请求动作OK!&nbsp;&nbsp;&nbsp;Response Content-Type:' + Content_Type + "&nbsp;&nbsp;&nbsp;&nbsp;这是图片哎！！！让我看看!";
                 } else if (Content_Type.indexOf('application/json')  != -1 ){      //图片播放
                     var json1 = document.getElementById('json1');
                     json1.innerText =request.responseText;
                     result1.innerHTML = '跨域请求动作OK!&nbsp;&nbsp;&nbsp;Response Content-Type:' + Content_Type + "&nbsp;&nbsp;&nbsp;&nbsp;这是文字哎！！！让我看看!";
                 }

             };
             request.onabort = function(){
                 console.log('跨域请求失败');
                 result1.setAttribute('style',"color: red; font-size:30");
                 result1.innerHTML = "跨域请求失败!!!";
             };  //跨域失败动作
             request.send();    //发送请求

         }else { 
             result1.setAttribute('style',"color: red; font-size:30");
             result1.innerHTML = "该浏览器不支持跨域!!!";
             console.log('该浏览器不支持跨域')
         }
    }
</script>

</html>
复制代码

 

posted on   zhangmingda  阅读(600)  评论(0)  编辑  收藏  举报

编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示
AI IDE Trae