IE9 在加载 iframe 中的脚本时抛出异常，为什么？

在前端开发中，我们有时需要使用 iframe 元素来加载外部网页或应用程序。然而，当我们在使用 IE9 浏览器时，可能会遇到一个问题：在 iframe 中加载脚本时，浏览器会抛出异常。

这个问题的根源在于 IE9 对跨域资源共享（CORS）的支持不完善。当我们在 iframe 中加载脚本时，如果该脚本来自于不同的域名，那么 IE9 会拒绝访问该脚本并抛出异常。

具体来说，当我们在 iframe 中加载脚本时，IE9 会发送一个 OPTIONS 请求以检查该请求是否可以被服务器接受。如果服务器返回了预期的响应头，那么 IE9 会发送真正的 GET 或 POST 请求获取脚本内容。然而，由于 IE9 对 CORS 的支持不完善，它可能无法正确处理 OPTIONS 请求，导致最终的 GET 或 POST 请求被阻止并抛出异常。

解决这个问题的方法是通过配置服务器端响应头来允许跨域访问。具体来说，我们需要在服务器端设置如下响应头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

这样，当浏览器接收到 OPTIONS 请求时，它就能正确地处理响应头并发送真正的 GET 或 POST 请求。如果你使用的是 Express.js，可以使用下面的代码来设置响应头：

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
    res.header("Access-Control-Allow-Headers", "Content-Type");
    next();
});

除了配置服务器端响应头外，我们还可以使用 JSONP 或者在同一域名下加载脚本的方式来绕过这个问题。

总之，在使用 IE9 时，当我们需要在 iframe 中加载跨域脚本时，我们需要注意到这个问题并采取相应的措施来避免异常的抛出。

参考文献：

• Internet Explorer 9 throws exception when loading script in iframe
• MDN Web Docs: HTTP access control (CORS)

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30741