在前端开发中，当尝试以编程方式创建一个 iframe 时，我们可能会遇到一个常见的错误：拒绝访问。该错误表示浏览器不允许当前脚本访问所请求的资源。
错误原因
通常，此错误是由于浏览器的同源策略引起的。同源策略要求网页只能从与其本身相同协议、域名和端口的网站加载资源。如果脚本尝试从其他域名或端口加载资源，浏览器将拒绝该请求并返回 拒绝访问 错误。
例如，如果我们在 http://example.com 上的网页中尝试使用以下代码创建 iframe：
const iframe = document.createElement('iframe');
iframe.src = 'http://otherdomain.com';
document.body.appendChild(iframe);则会出现 拒绝访问 错误，因为我们正在尝试从另一个域名加载资源。
解决方法
要解决此错误，我们需要确保我们的脚本只从与当前网页相同的域加载资源。有几种方法可以实现这一点：
使用相对 URL
一个简单的解决方法是使用相对 URL 而不是绝对 URL。使用相对 URL 可以确保所有资源都来自于相同的主机和协议。
例如，我们可以使用以下代码创建 iframe：
const iframe = document.createElement('iframe');
// 使用相对 URL
iframe.src = '/path/to/file.html';
document.body.appendChild(iframe);这将确保 iframe 中加载的内容始终来自于与当前页面相同的主机和协议。
使用代理
另一个解决方法是使用代理。通过在服务器端设置代理，我们可以将所有请求路由到相同的域名和端口，并避免跨域问题。此方法需要在服务器端进行配置，因此可能需要更多的工作。
JSONP
JSONP 是一种在前端中解决跨域问题的常用技术。它利用了 <script> 标签不受同源策略限制的特性。该技术通过将数据包装在回调函数中返回，以达到跨域通信的目的。
例如，我们可以使用以下代码创建一个 JSONP 请求：
function handleResponse(data) {
console.log(data);
}
const script = document.createElement('script');
// 使用 JSONP
script.src = 'http://otherdomain.com/api?callback=handleResponse';
document.body.appendChild(script);这将向 http://otherdomain.com/api 发送一个请求，并在返回时调用名为 handleResponse 的回调函数。
结论
在前端开发中，当尝试以编程方式创建 iframe 或从其他域名或端口加载资源时，我们可能会遇到 拒绝访问 错误。要解决此问题，我们可以使用相对 URL、代理或 JSONP 等技术。选择哪种方法取决于您的具体需求和环境。
参考代码：
-- -------------------- ---- ------- -- ------- -- ----- - -------- --- -- ------ -- ------ ----- ------ - --------------------------------- ---------- - --------------------- ---------------------------------- -- ------- -- ----- ----- -- ---- ---- ---- - --------- ------ -------- -------------------- - ------------------ - ----- ------ - --------------------------------- ---------- - ----------------------------------------------------- ----------------------------------
以上是本文关于 拒绝访问 的 JavaScript 错误的介绍及解决方法，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12157