React Firebase应用集成Google Adsense遭遇CORS跨域问题

别担心，这个CORS报错其实是常见的小细节问题，我给你一步步拆解解决方法：

1. 修正脚本的URL协议 #

你当前使用的是http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js，但谷歌Adsense脚本早已强制要求HTTPS协议，HTTP请求会被浏览器的CORS策略直接拦截。直接把URL改成HTTPS版本：

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

将这段代码放在public/index.html的<head>标签内，加上async属性还能避免阻塞页面加载。

2. 用react-adsense库的正确姿势 #

既然你已经在用react-adsense，其实完全不需要手动在HTML里加脚本——这个库本身会帮你自动注入Adsense脚本，避免手动操作的失误：

• 先确认依赖已安装：

npm install react-adsense --save
# 或者用yarn
yarn add react-adsense

• 在需要展示广告的组件里导入并使用：

import Adsense from 'react-adsense';

function AdDisplayComponent() {
  return (
    <Adsense
      client="ca-pub-你的广告客户ID"
      slot="你的广告单元ID"
      style={{ display: 'block' }}
      format="auto"
      responsive="true"
      layoutKey="-gw-1+2a-9x+5c"
    />
  );
}

这种方式不仅能自动处理脚本加载，还能避免重复加载脚本的冲突问题。

3. 本地开发的特殊处理 #

谷歌Adsense本身不支持在localhost环境下展示真实广告，哪怕解决了CORS问题，你也大概率看不到广告。这时候可以用谷歌官方提供的测试广告单元替代：

• 测试客户ID：ca-pub-3940256099942544
• 测试广告单元ID：2177258517
  用这些测试ID在本地开发，既能避开CORS问题，还能看到模拟的广告效果，等部署到正式域名后再换成你自己的真实ID即可。

4. 额外检查点 #

• 确保你的正式域名已经在Google Adsense后台完成站点验证，否则部署后广告也无法正常显示；
• 不要在同一页面重复加载adsbygoogle.js脚本，这会导致不必要的冲突，用react-adsense组件就能避免这个问题。

内容的提问来源于stack exchange，提问作者ykn121