从URL加载JSON数据并在HTML展示时遇IE跨域错误求助

嘿，这个问题我太熟了——IE的CORS限制简直是前端开发者的噩梦之一！你遇到的SEC7120和SCRIPT7002错误，本质上是两个问题叠加：一是你的Azure Web App没配置正确的跨域允许头，二是IE对CORS的实现和现代浏览器完全不一样。

下面给你一步步解决的方案：

第一步：先搞定Azure Web App的CORS配置 #

首先得确保你的Azure后端允许前端页面的Origin访问：

• 登录Azure门户，找到你的Web App，进入「CORS」配置页面
• 在「允许的来源」列表里，添加你前端页面的完整URL（比如本地开发是http://localhost:8080，部署后是你的前端站点URL）
• 划重点：IE不支持*通配符，别图省事用通配符，一定要写具体的Origin
• 如果你的请求需要带Cookie，记得勾选「允许凭据」，否则不用动这个选项

第二步：针对IE做XHR兼容处理 #

IE8/9用的是XDomainRequest（简称XDR）而不是标准的XMLHttpRequest来处理跨域请求，IE10+才支持标准CORS的XHR。所以你得写个兼容的请求函数：

function loadJSON(url, callback) {
  var xhr;
  // 检测IE专属的XDomainRequest
  if (window.XDomainRequest) {
    xhr = new XDomainRequest();
    // XDR的事件和标准XHR不一样，只有onload、onerror这些
    xhr.onload = function() {
      try {
        var response = JSON.parse(xhr.responseText);
        callback(null, response);
      } catch (parseError) {
        callback(parseError, null);
      }
    };
    xhr.onerror = function() {
      callback(new Error('跨域请求失败（IE XDR）'), null);
    };
    xhr.open('GET', url);
    xhr.send();
  } else {
    // 现代浏览器+IE10+用标准XHR
    xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          try {
            var response = JSON.parse(xhr.responseText);
            callback(null, response);
          } catch (parseError) {
            callback(parseError, null);
          }
        } else {
          callback(new Error(`请求失败，状态码：${xhr.status}`), null);
        }
      }
    };
    xhr.send();
  }
}

// 调用示例：读取JSON并渲染成列表
loadJSON('你的外部JSON文件URL', function(error, data) {
  if (error) {
    console.error('加载失败:', error);
    return;
  }
  // 这里根据你的JSON结构调整渲染逻辑，假设是数组结构
  var listContainer = document.createElement('ul');
  data.forEach(function(item) {
    var listItem = document.createElement('li');
    // 比如你的JSON每个项有title字段，就用item.title，按需修改
    listItem.textContent = item.title || JSON.stringify(item);
    listContainer.appendChild(listItem);
  });
  document.body.appendChild(listContainer);
});

注意XDR有几个坑要避开：

• 只支持GET和POST请求，不支持PUT/DELETE
• 不能自定义请求头
• 不能发送Cookie（所以如果后端需要鉴权，IE8/9可能没法用）
• 必须是同协议（HTTP对HTTP，HTTPS对HTTPS），不能混合

额外排查小技巧 #

1. 确认你的JSON文件所在的服务器（如果不是Azure Web App本身）也配置了Access-Control-Allow-Origin头，不然还是会报错
2. IE的安全设置：如果是本地测试，IE可能把本地HTML文件归为「本地Intranet」区域，可能需要降低该区域的安全级别，或者把测试站点添加到信任站点（部署到Azure后这个问题就消失了）
3. 检查JSON的MIME类型：服务器返回的Content-Type必须是application/json，IE对这个要求很严格，要是返回text/plain可能解析失败

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