javascript - 为什么 google adsense 脚本不断返回 CORS 错误？

问题描述

我正在尝试将 adsense 放在我由 react 构建的网页上。自动广告工作正常，但手动广告在我的开发环境和生产环境中都会返回 CORS 错误。

Access to script at 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' from origin 'http://localhost:3050' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我将脚本标签放在 index.html 中。

<!DOCTYPE html>
<html lang="ko">

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=xxxxxxxx"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'xxxxxxxx');
  </script>
  <script crossorigin async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <meta charset="utf-8" />
  <title>Title</title>
</head>

<body>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

</html>

jsx文件是这样的。

import React, { useEffect } from 'react';
import Grid from '@material-ui/core/Grid'

const MyPage = (props) => {
   
  useEffect(() => {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }, []);

  return (
    <Grid
      container
      justify="center"
    >        
        <Grid item xl={3} lg={2}>
            <div style={{
              display: 'flex',
              justifyContent: 'center',
              minWidth: 160,
              maxWidth: 320,
              height: '100%',
              alignItems: 'center',
              flexDirection: 'column'
            }}
            >
              <ins
                className="adsbygoogle"
                style={{ display: 'inline-block', width: '160px', height: '600px' }}
                data-ad-client="xxxxxxxxxx"
                data-ad-slot="xxxxxxxxxxx"
              />
            </div>
        </Grid>  
        <Grid item xl={3} lg={2}>
          <div style={{
            display: 'flex',
            justifyContent: 'center',
            minWidth: 160,
            maxWidth: 320,
            height: '100%',
            alignItems: 'center',
            flexDirection: 'column'
          >
            <ins
              className="adsbygoogle"
              style={{ display: 'inline-block' }}
              data-ad-client="xxxxxxxxxxx"
              data-ad-slot="xxxxxxxxxxxx"
              data-ad-format="auto"
              data-full-width-responsive="true"
            />
          </div>
          )}
        </Grid>
    </Grid>
  );
};

export default MyPage;

我在 React Firebase 网络应用程序中使用 Google Adsense 时尝试使用 CORS，并尝试使用 react-adsense 库。然而，他们都没有成功。我坚持了3天。有什么解决办法吗？

标签： javascriptreactjsadsense

javascript - 为什么 google adsense 脚本不断返回 CORS 错误？

问题描述

解决方案

推荐阅读