在React Firebase网络应用中使用Google Adsense时遇到CORS [英] Having CORS when using Google Adsense in React Firebase web app

问题描述

我想将Google Adsense添加到我的React Web中。我正在使用反应-adsense 库。

I want to add google adsense to my react web. I am using the library react-adsense.

但是，当我想在我的html文件中添加google adsense脚本时出现此错误：

However, I got this error while I want to add the google adsense script in my html file:

从源 http：// localhost：3000访问 http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js的脚本已被CORS政策阻止：否访问权限 -Control-Allow-Origin'标头出现在请求的资源上。因此，不允许访问源'http：// localhost：3000'。

这是我添加脚本的方式：

Here is how I added the script:

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

更新＃1
我正在使用Firebase托管我的主机网站

Update #1 I am using firebase to host my website

推荐答案

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

To test Adsense locally you may try one of these options:

1-使用data-adtest = on

1- use 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; （同步）

2- Use google_adtest="on"; (synchronous)

<script type="text/javascript">google_adtest="on";</script>
<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

3-使用扩展名（chrome示例）像这样。或尝试使用其他浏览器。

3- Use an extension (chrome example) like this one. Or try another browser.

4-如果不起作用，则可以尝试使用nginx中的proxy_pass进行反向代理-以便模拟您正在从

4- If none works, you may try doing a reverse proxy with proxy_pass in nginx - in order to "simulate" that you are visiting from an allowed origin and editing your /etc/hosts (not sure it works though).

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

这篇关于在React Firebase网络应用中使用Google Adsense时遇到CORS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！