HTTPS环境下跨域调用appendChild加载资源失败问题求助

核心问题排查 #

你遇到的加载失败问题，主要是两个原因导致的：

• 变量名错误：get()函数里把输入值存在wmr_purse变量中，但拼接URL时误用了未定义的purse变量，导致参数值异常，甚至引发请求路径错误。
• 相对路径域名混淆：脚本里的/validator.php是相对路径，在站点1的页面中执行时，会请求站点1的对应路径而非站点2的资源。当站点1使用HTTPS时，站点1本身没有该文件，因此触发加载失败。

具体修复步骤 #

1. 修正变量名错误 #

将拼接URL时的purse替换为正确的wmr_purse变量，确保使用获取到的输入值：

// 原错误代码
js.src = "/validator.php?purse=" + purse;
// 修正后
js.src = "//site2.com/validator.php?purse=" + wmr_purse;

2. 改用协议相对的绝对路径 #

把相对路径替换为站点2的完整绝对路径，使用//开头的协议相对格式，这样无论当前页面是HTTP还是HTTPS，都会自动匹配协议请求站点2的资源，避免域名混淆：

js.src = "//site2.com/validator.php?purse=" + wmr_purse;

3. 修复后的完整validator.php代码 #

另外注意：原代码的响应头设置错误，输出JavaScript内容应使用text/javascript类型，否则可能导致浏览器解析异常：

<?
header("Content-Type: text/javascript; charset=utf-8");
if(isset($_GET['purse'])){
?>
alert("GOOD!");
<?
}else{
?>
function get() {
    var js = document.createElement("script");
    var wmr_purse = document.getElementById("purse").value;
    js.type = "text/javascript";
    js.src = "//site2.com/validator.php?purse=" + wmr_purse;
    document.body.appendChild(js);
    return false;
}
<?
}?>

可选优化 #

如果遇到跨域权限问题，可给动态创建的script标签添加跨域属性，提升兼容性：

js.crossOrigin = "anonymous";

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