时间戳

首页 > 解决方案 > 使用 java 脚本和 proxy.php 调用 CORS API 代码中的错误可能是什么？

javascript - 使用 java 脚本和 proxy.php 调用 CORS API 代码中的错误可能是什么？

问题描述

java脚本代码

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<button type="button" onclick="loadXMLDoc()">Show Details</button>
<br><br>
<table id="demo"></table>

<script>

function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     // xmlDoc=xmlhttp.responseXML; //
      myFunction(this);
    }
  };

  xmlhttp.open("GET", "proxy.php?a=pjm", true);
  //https://crossorigin.me/
  //&callback=? 

  //xmlhttp.open("GET", "http://db1.SITENAME.com:8080/WEB_API/awb_ref_query.asmx/awb_ref_query_xml?str_awb_refno=160230230&str_awb_refno_type=AWB&str_userid=testapi&str_pwd=testapi", true);
  alert("zero");


  xmlhttp.send();

}
function myFunction(xml) {
  var i;
  alert("first");

 var xmlDoc = xml.responseXML;
  alert("second");
  var table="<tr><th>Progress</th><th>Scan_Detail</th></tr>";
  alert("third");
  document.addEventListener("DOMContentLoaded", function(){
    alert(listLength());
});
   var x = xmlDoc.getElementsByTagName("Scan_Detail");
  alert("fourth");

  for (i = 0; i <x.length; i++) { 

    table += "<tr><td>" +
    x[i].getElementsByTagName("Progress")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("Delivered_Undelivered")[0].childNodes[0].nodeValue +
    "</td></tr>";

  }
  alert("fifth");
  document.getElementById("demo").innerHTML = table;
  alert("sixth");
}

</script>

</body>
</html>

proxy.php 代码

<?php
//set your return content type

header('Content-type: application/xml');
$c = $_GET['a'];

if($c=="pjm"){
    $url = 'http://db1.SITENAME.com:8080/WEB_API/awb_ref_query.asmx/awb_ref_query_xml?str_awb_refno=160230230&str_awb_refno_type=AWB&str_userid=testapi&str_pwd=testapi';

   // $url = 'https://www.w3schools.com/xml/guestbook.asp';
    }

    //get that website content
    $handle = fopen($url,"r");

    //if there is something read and return
    if($handle) {
        while(!feof($handle)) {
            $buffer = fgets($handle, 4096);
            echo $buffer;
        }
        fclose($handle);

    }


?>

错误在 '''var x = xmlDoc.getElementsByTagName("Scan_Detail"); 在 html java 脚本文件中

代码假设显示跨域 XML 数据文件。可能出了什么问题？使用 CORS chrome 插件并且不使用 php java 脚本此代码工作正常，但我必须使用 php 文件运行 java 脚本代码而不使用任何插件。欢迎尽早回复。谢谢。

标签： javascriptphphtml

解决方案

proxy您可以使用Fetchapi 并指示它直接执行CORS请求，而不是使脚本复杂化- Fetchapi 也非常易于使用，这是一个好处。

当您查看文档时，如果您熟悉 XMLHttpRequest 调用的简单性，这可能看起来有点令人生畏，但这是值得的，因为基于整体Promise的方法是前进的方向。

此代码适用于已知 url，但无法针对您的端点进行测试...

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Fetch & Parse XML</title>
        <script>
            document.addEventListener('DOMContentLoaded',()=>{
                const url='http://db1.SITENAME.com:8080/WEB_API/awb_ref_query.asmx/awb_ref_query_xml?str_awb_refno=160230230&str_awb_refno_type=AWB&str_userid=testapi&str_pwd=testapi';

                const config={
                    mode:'cors',
                    credentials:'omit',
                    cache:'default',
                    redirect:'follow'
                };

                const callback=function(r){
                    let oParser=new DOMParser();
                    let data=oParser.parseFromString( r, 'text/xml' );

                    /* do something with the parsed XML document... */
                    console.info( data );
                };


                fetch( url, config ).then( response => {
                    return response.text();
                }).then( xml => {
                    callback( xml )
                }).catch( error => {
                    alert( error )
                })
            });
        </script>
    </head>
    <body>
        <!-- content -->
    </body>
</html>

推荐阅读