Javascript 使用java脚本和proxy.php调用CORS API代码中会出现什么错误？
java脚本代码Javascript 使用java脚本和proxy.php调用CORS API代码中会出现什么错误？,javascript,php,html,Javascript,Php,Html,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&
<!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>
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，td{
填充物：5px；
}
显示细节
函数loadXMLDoc（）{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
//xmlDoc=xmlhttp.responseXML//
我的职能（本）；
}
};
open（“GET”，“proxy.php？a=pjm”，true）；
//https://crossorigin.me/
//&回调=？
//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“，对）；
警报（“零”）；
xmlhttp.send（）；
}
函数myFunction（xml）{
var i；
警报（“第一”）；
var xmlDoc=xml.responseXML；
警报（“第二”）；
var table=“ProgressScan\u Detail”；
警报（“第三”）；
document.addEventListener（“DOMContentLoaded”，function（））{
警报（listLength（））；
});
var x=xmlDoc.getElementsByTagName（“扫描详细信息”）；
警报（“第四”）；
对于（i=0；i而言，您可以使用Fetch
api并指示它直接执行CORS
请求，Fetch
api也非常易于使用，这是一个额外的好处
如果您熟悉XMLHttpRequest调用的简单性，那么当您查看时，可能会觉得有点令人畏惧，但这是值得的，因为基于的方法论是前进的方向
此代码适用于已知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>
获取和解析XML
document.addEventListener（'DOMContentLoaded'，（）=>{
常量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';
常量配置={
模式：'cors'，
凭证：'省略'，
缓存：'default'，
重定向：'follow'
};
常量回调=函数（r）{
让oParser=newdomparser（）；
让data=oParser.parseFromString（r'text/xml'）；
/*对已解析的XML文档执行某些操作*/
控制台信息（数据）；
};
获取（url，配置）。然后（响应=>{
返回response.text（）；
}).then（xml=>{
回调（xml）
}).catch（错误=>{
警报（错误）
})
});
devtools控制台中浏览器记录的确切错误消息是什么？为什么不使用fetch
api？您可以轻松地发送这样的跨域请求，而无需中介proxy.php
scripterror位于'''''var x=xmlDoc.getElementsByTagName（“扫描详细信息”）；在html java脚本文件中@sideshowbarkererror is-error typeerror:无法读取null@sideshowbarkerThanks的属性'getelementsbytagname'以获得即时响应。我会检查并让您知道。@RamRaiderI使用了const url=''；它给出了typeerror:无法获取。请引导。感谢@RamRaiderI如果您在浏览器中加载该页面，但查看控制台（特别是在网络请求时）查看响应
标题，您会注意到没有访问控制允许来源
标题…如果没有此跨域请求，使用javascript将无法工作。您的问题涉及CORS api
，这表明特定端点与获取
一样可用于CORS请求emote站点没有将Access Control Allow Origin
头设置为*
（全部），那么XMLHttpRequest&Fetch将不起作用-在这种情况下，您的代理
想法可能是可行的，但使用curl
并为端点设置合适的选项（即：ssl、cookies、useragent等）您可以尝试将配置中的mode
选项从cors
设置为no cors
，以访问该XML文件
<!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>