Javascript安全性错误
所以我用node.js（watch-http-server）创build了一个本地web服务器。 当我跑下面，它完全符合堆栈的片段。 但是，当我在本地网上运行它时，问题就出现了
SecurityError：权限被拒绝访问跨源对象的属性“href”
$(function(){ alert('load'); }); body, html{ padding: 0; margin: 0; cursor: default; overflow: hidden; background: url("../res/background.png") no-repeat; background-size: cover; } .stream-container{ position: fixed; margin: 0; padding: 0; top: 2%; left: 5%; } .chat-container{ position: fixed; margin: 0; padding: 0; top: 33%; left: 5%; }
<!Doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title> Twitch Bot </title> <meta name="author" content="Author"> <link rel="stylesheet" href="../css/styles.css"> </head> <body> <div class="stream-container"> <iframe id = "stream-frame" src="https://player.twitch.tv/?channel=dyarambo" height="300px" width="30px" frameborder="0" scrolling="no" allowfullscreen="false"></iframe> </div> <div class="chat-container"> <iframe frameborder="0" scrolling="no" id="chat_embed" src="https://www.twitch.tv/lovenpk/chat?darkpopout" height="300px" width="300px"></iframe> </div> <!-- Javascripts below --> <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script> <script type="text/javascript" scr="../js/index.js"></script> </body> </html>
任何想法？
跨境安全政策正在遭到侵犯。
问题在于您使用的iframe ：
<iframe id = "stream-frame" src="https://player.twitch.tv/?channel=dyarambo" height="300px" width="30px" frameborder="0" scrolling="no" allowfullscreen="false"></iframe>
来自MDN ：
错误：权限被拒绝访问属性“x”
试图访问您没有权限的对象。 这可能是从违反同源策略的不同域加载的元素。
由于您的localhost是从与player.twitch.tv不同的域中的服务器提供的，您将被禁止访问该服务器上的信息。 这是networking内置的浏览器内限制。
此外，您的本地networking应用程序也需要与服务于player.twitch.tv的服务器在相同的端口上运行。
来自MDN跨源安全策略 ：
Here are some examples of resources which may be embedded cross-origin: Anything with <frame> and <iframe>. A site can use the X-Frame-Options header to prevent this form of cross-origin interaction.
我试着在我的电脑上使用一个侦听localhost：5555的nodejs服务器进行testing，没有SecurityError。