<!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"></span> </div> <div> <img id="img1" ><span id="span1"></span> </div> <!--<video id="video1" controls="controls" src="http://yx-kbs.ks3-cn-beijing.ksyun.com/cspl/2cca5951e203a69a4ed05eeb7d7638fe.mp4" width="320" height="240" ></video>--> <video id="video1" controls="controls" width="320" height="240" ></video> <!--flash回退--> <!--为了支持低版本的浏览器以及对不同用户群的支持，MediaElement.js提供了flash回退的方式，你可以采用以下代码进行调用--> <!--<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">--> <!--<!– MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 –>--> <!--<source type="video/mp4" src="myvideo.mp4" />--> <!--<!– WebM/VP8 for Firefox4, Opera, and Chrome –>--> <!--<source type="video/webm" src="myvideo.webm" />--> <!--<!– Ogg/Vorbis for older Firefox and Opera versions –>--> <!--<source type="video/ogg" src="myvideo.ogv" />--> <!--<!– Optional: Add subtitles for each language –>--> <!--<track kind="subtitles" src="subtitles.srt" srclang="en" />--> <!--<!– Optional: Add chapters –>--> <!--<track kind="chapters" src="chapters.srt" srclang="en" />--> <!--<!– 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 –>--> <!--<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" />--> <!--<!– Image as a last resort –>--> <!--<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); console.log('请求动作被允许'); result1.innerText = '测试跨域访问成功！！！！'; var blob = this.response; var img = document.getElementById('img1'); var video1 = document.getElementById('video1'); img.src = window.URL.createObjectURL(blob); video1.src = window.URL.createObjectURL(blob); video1.play(); }; request.send(); }else { console.log('跨域请求失败')} } </script> </html>
跨域请求测试代码
猜你喜欢
转载自www.cnblogs.com/zhangmingda/p/12310127.html
今日推荐
周排行