本地搭建HTML无法调用公共API 页面以file协议而非localhost访问

1. 页面URL显示本地文件路径问题 #

• 原因：你直接双击了本地的html文件打开页面，系统默认使用file协议加载本地文件，没有走XAMPP的Apache服务。
• 修复方式：打开XAMPP控制面板启动Apache服务，之后在浏览器地址栏输入http://localhost/api/currency-converter.html访问即可。

2. 无法调用汇率转换API问题 #

按优先级排查以下原因：

• 代码拼写错误
  你代码中document.getElementbyID是错误写法，正确语法为document.getElementById（方法名最后两位为大写I+小写d，不是大写ID），该错误会直接抛出JS异常，后续的API请求逻辑完全不会执行。
• 跨域策略拦截
  使用file://协议打开的页面，浏览器同源策略会禁止向外部域名发起请求，直接拦截API调用，切换为通过localhost访问页面后即可解决该问题。
• API配置问题
  确认你替换的access_key是有效密钥，该平台免费套餐存在请求次数限制，超出限制后也会返回错误响应。

修复后的核心JS代码示例 #

function CurrencyConversion() {
  // 修正方法名拼写错误
  var fromvalue = document.getElementById("From").value;
  var tovalue = document.getElementById("To").value;
  var amount = document.getElementById("FrmAmt").value;
  var xmlhttp = new XMLHttpRequest();
  var url = "http://api.exchangeratesapi.io/v1/latest?access_key=xxxxxxxxx&symbols=" + fromvalue + "," + tovalue;
  xmlhttp.open("GET", url, true);
  // 把回调放在send之前，避免低版本浏览器兼容问题
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var result = JSON.parse(xmlhttp.responseText);
      // 可在此处添加计算逻辑后渲染到result节点
      alert(JSON.stringify(result));
    }
  };
  xmlhttp.send();
}

内容的提问来源于stack exchange，提问作者Mahi