阻止原始框架“null”访问跨域框架 - chrome

Posted 2023-02-27

技术标签:

【中文标题】阻止原始框架“null”访问跨域框架 - chrome【英文标题】：blocked a frame of origin "null" from accessing a cross-origin frame - chrome 【发布时间】：2015-07-11 02:28:36 【问题描述】：

我是 javascript 新手，正在通过一本侧重于 IE 7+ 和 Firefox 2+ 应用程序的教科书学习基础知识。但是，我正在使用 Chrome，并且在运行书中给出的程序时遇到以下错误：“阻止了一个原始框架‘空’访问跨域框架。”谁能告诉我是什么导致了错误以及如何修复它？这两个程序如下。

//This is the program being loaded into the browser
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>

<script type="text/javascript">

function calcFactorial(factorialNumber)
    var factorialResult = 1;
    for(;factorialNumber>0;factorialNumber--) factorialResult *= factorialNumber;
    return factorialResult;


</script>

</head>

<frameset cols="100%,*">
<frame name="fraCalcFactorial" src="calcfactorial.htm"/>
</frameset>

</html>

下面是src文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<script type="text/javascript">
function butCalculate_onclick()
    try
        if (window.top.calcFactorial == null)
            throw "This page is not loaded within the correct frameset";
        if (document.form1.txtNum1.value == "")
            throw "!Please enter a value before you calculate its factorial";
        if (isNaN(document.form1.txtNum1.value))
            throw "!Please enter a valid number";
        if (document.form1.txtNum1.value < 0)
            throw "!Please enter a positive number";
    
    catch(exception)
        if (typeof(exception) == "string")
            if (exception.charAt(0) == "!")
                alert(exception.substr(1));
                document.form1.txtNum1.focus();
                document.form1.txtNum1.select();
            
            else alert(exception);
        
        else alert("The following error occurred: " + exception.message);
    

</script>
</head>
<body>
<form action="" name="form1">
    <input type="text" name="txtNum1" size="3" /> factorial is
    <input type="text" name="txtResult" size="25" /><br/>
    <input type="button" value="Calculate Factorial"
        name="butCalculate" onclick="butCalculate_onclick()" />
</form>
</body>
</html>

【问题讨论】：

你是在本地机器上运行它，还是托管在网络服务器上？默认情况下，Chrome 不允许从本地硬盘加载的帧访问彼此的内容。如果框架在同一个 Web 服务器上，它们可以。 Chrome 有一个命令行参数，可以暂时中止这个安全检查。请注意，iframe 和 frame 都会出现此问题。 【参考方案1】：

发生这种情况是因为 Chrome 不允许您硬盘中的帧访问彼此的内容。其中，从技术上讲，我们称之为跨域请求。

上述问题的解决方法是： 1. 您可以在本地 Web 服务器上托管您的网页。请参阅以下链接：What is a faster alternative to Python's http.server (or SimpleHTTPServer)? 2. 使用任何其他浏览器，例如 Firefox

【讨论】：

在我的本地机器上托管后尝试对我不起作用.. 收到此错误：blocked a frame of origin “http://127.0.0.1:8080” from accessing a cross-origin frame - chrome Firefox 75.0 似乎有同样的问题即使在从本地服务器运行后也不适合我 @arunwebber 你在 Firefox 中试过了吗？即使使用本地服务器，Chrome 也会阻止它 @TaouBen 现在可能不是正确答案。 6年前回答并正确。如果您有更新的答案，您可以将其添加到此帖子中，以便当前成员从中受益。谢谢【参考方案2】：

如果您使用 Visual Studio Code，您可以安装名为“Live Server”的扩展。当我遇到同样的问题时，它帮助了我。

【讨论】：

【参考方案3】：

如果您不想按照接受的答案中的建议使用本地 Web 服务器，则可以在禁用 cross domain web security / same origin policy 的情况下运行浏览器。

对于 Chrome：

Disable same origin policy in Chrome

对于 Firefox：

Disable cross domain web security in Firefox

https://addons.mozilla.org/en-US/firefox/addon/access-control-allow-origin/

Disable firefox same origin policy

【讨论】：

以上是关于阻止原始框架“null”访问跨域框架 - chrome的主要内容，如果未能解决你的问题，请参考以下文章