html - 在 React Firebase Web 应用程序中使用 Google Adsense 时具有 CORS

标签 html reactjs firebase cors adsense

我想将 google adsense 添加到我的 react web 中。我正在使用图书馆 react-adsense .

但是,当我想在我的 html 文件中添加 google adsense 脚本时出现此错误:
Access to Script at 'http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
这是我添加脚本的方式:

<script crossorigin="anonymous" async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

更新 #1
我正在使用 firebase 来托管我的网站

最佳答案

要在本地测试 Adsense,您可以尝试以下选项之一:

1- 使用 data-adtest="on"

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
 data-adtest="on"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

2- 使用 google_adtest="on"; (同步)
<script type="text/javascript">google_adtest="on";</script>
<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

3- 使用扩展程序(chrome 示例)like this one .或者尝试其他浏览器。

4- 如果都不起作用,您可以尝试在 nginx 中使用 proxy_pass 进行反向代理 - 以“模拟”您正在从允许的来源访问并编辑您的/etc/hosts(但不确定它是否有效)。
server {
  listen       80;
  server_name  mydomain.com;
  location / {
    proxy_pass http://127.0.0.1:3000;
  }
}

关于html - 在 React Firebase Web 应用程序中使用 Google Adsense 时具有 CORS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49347921/

相关文章:

javascript - 警告栏会消失吗

android - 使用 Android/Firebase 邀请系统

javascript - 如何从密码字段中隐藏除一个字符以外的所有字符

html - 如何为特定列创建仅在底部带有边框的表格?

javascript - 货币兑换脚本不起作用

reactjs - 使用 'react-leaflet' 新 useLeaflet() Hook 的示例?

reactjs - 如何在React.lazy和Suspense中获取加载进度

javascript - 无法读取未定义的属性 'type' (react-router-redux)

android - 火力地堡数据库 : Check if node has no children?

javascript - 今天的google doodle世界博览会是如何实现的?