Google ReCaptcha未捕获的DOMException：屏蔽了包含来源的框架＆＃34; https：//www.google.com"

Question

我不确定为什么会发生这种情况，并且它不是常见的常见错误：

  

未捕获的SecurityError：阻止包含原点的帧。

我得到的错误是：

  

未捕获的DOMException：阻止了包含来源的框架＆＃34; https://www.google.com＆＃34;从访问跨源框架。

我按照谷歌关于如何启用ReCaptcha的说明，但它不适合我！

// top of the page
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
// then somewhere in the bottom
<div class="g-recaptcha" data-sitekey="@Model.Register.CaptchaSiteKey"></div>

正在加载我的CaptchaSiteKey（我已调试并检查过）。

Answer 1

  

同源策略是Web应用程序中的一个重要概念   安全模型。根据该策略，Web浏览器允许脚本   包含在第一个网页中以访问第二个网页中的数据，但是   仅当两个网页具有相同的来源时。原点定义为a   URI方案，主机名和端口号的组合。这个政策   防止一个页面上的恶意脚本获取访问权限   通过该页面的文档对象在另一个网页上的敏感数据   模型。

换句话说：recaptcha是远程脚本资源，出于安全问题，您的Web服务器不允许使用外部资源代码。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

要允许任何资源访问您的资源，您可以指定：

  

Access-Control-Allow-Origin：*

要允许https://www.google.com访问您的资源，您可以指定：

  

Access-Control-Allow-Origin：https://www.google.com

Answer 2

正如此处https://stackoverflow.com/a/29014899/1853802的答案所解释的，将页面上的所有http（s）协议更改为//

e.g。

{{1}}

这解决了我。

注意：请记得事后清除缓存。