跨域测试代码

跨域测试代码

跨域是前后端经常会碰到的问题,那么如何快速的定位这个问题呢?可以使用如下代码,进行测试,分别对目标地址,进行普通访问跨域访问(前端处理跨域)。还可以显示出,响应时间。

测试页面代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="js判断URL是否可访问" />
  <title>js判断URL是否可访问title>
head>
<body>
  <div>检验的url地址:div>
  <input type="text" style="width:600px;height:30px;font-size:14px;" id="urlText" value="https://www.baidu.com/" />
    <input type="button" value="判断是否可访问" onclick="getURL()" />
  <br />
  <div id="msg1">div>
  <div id="msg">div>
  <br />
-----------前端处理跨域后访问(使用jsonp)-------------
 <br />
  <div id="msg22">div>
  <div id="msg2">div>

  <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js">script>
  <script type="text/javascript">
    function getURL() {
      $("#msg").html("");
      var url = $("#urlText").val();//请求的url
      var dateTime = disptime();
      var time2 = dateTime.DateTime; 
      $("#msg1").html("发送时间:" + time2); 
      $.ajax({
        type: 'get',
        url: url,
        cache: false,
        dataType: "json",
        processData: false,
        timeout:10000, //超时时间,毫秒
        complete: function (data) {
          var dateTime2 = disptime();
          var time22 = dateTime2.DateTime;
          var htmlTxt =[];
          if (data.status==200) {
            htmlTxt.push("成功
"
); } else { htmlTxt.push("失败
"
); } htmlTxt.push("readyState=" + data.readyState + "
status="
+ data.status + "
statusText="
+ data.statusText + "
响应时间:"
+ time22); var htmlString = htmlTxt.join(''); $("#msg").html(htmlString); } }); getURL1(); } function getURL1() { $("#msg2").html(""); var url = $("#urlText").val();//请求的url var dateTime = disptime(); var time2 = dateTime.DateTime; $("#msg22").html("发送时间:" + time2); $.ajax({ type: 'get', url: url, cache: false, dataType: "jsonp", //跨域采用jsonp方式 processData: false, timeout:10000, //超时时间,毫秒 complete: function (data) { var dateTime2 = disptime(); var time22 = dateTime2.DateTime; var htmlTxt =[]; if (data.status==200) { htmlTxt.push("成功
"
); } else { htmlTxt.push("失败
"
); } htmlTxt.push("readyState=" + data.readyState + "
status="
+ data.status + "
statusText="
+ data.statusText + "
响应时间:"
+ time22); var htmlString = htmlTxt.join(''); $("#msg2").html(htmlString); } }); } function disptime() { var date = new Date(); var yyyy = date.getFullYear();//四位年份 var month = date.getMonth() + 1;//月份 0-11 var day = date.getDate();//日 var HH = date.getHours();//时 var minute = date.getMinutes();//分钟 var second = date.getSeconds();//秒 var milliseconds=date.getMilliseconds();//毫秒 if (month < 10) { month = "0" + month; } if (day < 10) { day = "0" + day; } if (HH < 10) { HH = "0" + HH; } if (minute < 10) { minute = "0" + minute; } if (second < 10) { second = "0" + second; } var time = yyyy + "-" + month + "-" + day + " " + HH + ":" + minute + ":" + second + " " + milliseconds; var timeTxt = yyyy + month + day + HH + minute + second; var time = { DateTime: time, TimeTxt: timeTxt } return time; }
script> body> html>

测试结果页面

可以看到,分别进行了两次请求,第一次为前端直接访问,为跨域处理。结果,请求失败。
第二次,为前端处理跨域后再访问,访问成功。
说明,后端没有开启跨域处理。
跨域测试代码_第1张图片

你可能感兴趣的:(工具,#,JavaScript,跨域测试代码,html)