在 React Firebase 网络应用程序中使用 Google Adsense 时拥有 CORS

Question

我想将 google adsense 添加到我的 React 网站。我正在使用库 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 托管我的网站

Answer 1

要在本地测试 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- 如果 none 有效，您可以尝试在 nginx 中使用 proxy_pass 进行反向代理 - 为了 "simulate" 您正在从允许的来源访问并编辑您的/etc/hosts（虽然不确定它是否有效）。

server {
  listen       80;
  server_name  mydomain.com;
  location / {
    proxy_pass http://127.0.0.1:3000;
  }
}

在 React Firebase 网络应用程序中使用 Google Adsense 时拥有 CORS

Having CORS when using Google Adsense in React Firebase web app

html

adsense

cors

firebase

reactjs