CORS 为 ReactGA 运行 pageView 时出错

Question

我正在尝试将 React-GA 添加到 react web 应用程序中，并通过将其添加到 index.js 来遵循文档：

import ReactGA from 'react-ga';
ReactGA.initialize('MY_ID');
ReactGA.pageview(window.location.pathname + window.location.search);

但是，这会导致浏览器控制台中出现以下错误

从源 'http://localhost:3000' 访问 XMLHttpRequest 在 'https://www.google-analytics.com/j/collect?......' 已被 Z5A8FEFF0B4BDE3EEC9244B76023B79 的访问值阻止-Control-Allow-Origin' 当请求的凭据模式为“包含”时，响应中的 header 不能是通配符“*”。 XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。

analytics.js:37 POST https://www.google-analytics.com/j/collect?...... 净::ERR_FAILED

查看网络选项卡中的 Google Analytics HTTP 响应，我肯定看到了为访问控制允许标头设置的通配符：

access-control-allow-credentials: true
access-control-allow-headers: *
access-control-allow-methods: GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS
access-control-allow-origin: *
access-control-expose-headers: *
...

但是，我不确定如何解决这个问题，因为它似乎是由谷歌的回应引起的。

Answer 1

我认为您的问题是您使用通配符和凭证模式 'include' 的请求。

当请求的凭证模式为“包含”时，响应中的“Access-Control-Allow-Origin”header 的值不能是通配符“*”。

您需要指定请求的来源才能正常工作。 这里是'http://localhost:3000'。

您可以在此 stackoverflow 帖子中找到更多信息

我使用此代码通过“create-react-app”测试 Google Analytics。

Answer 2

这是一个示例，在 userEffect 中使用 ReactGa，并使用一些 userState 变量示例 userId（可选）对其进行初始化，并将 cookieDomain 标记为 auto 并启用调试。

import ReactGa from 'react-ga';

useEffect(()=>{
    
    ReactGa.initialize('Tracking_Id', {
        gaOptions: {
          userId: username ? username :'Not-Logged'
        },
      'cookieDomain': 'auto',
      'debug': true
    });
    ReactGa.pageview(window.location.pathname + window.location.search)
    console.log(ReactGa.ga())
       
 },[])

Answer 3

您可以在任何地方使用 CORS 代理，只需向https://cors-anywhere.herokuapp.com/https://www.Z50F09D94FD93ABC76A0D2C0267060B2.8请求。 反而