3

我正在尝试将 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”访问“https://www.google-analytics.com/j/collect?......”的 XMLHttpRequest 已被 CORS 策略阻止：当请求的凭据模式为“包含”时，响应中的“Access-Control-Allow-Origin”标头不得为通配符“*”。XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。

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

查看网络选项卡中的 Google Analytics HTTP 响应，我肯定看到了为 access-control-allow-headers 设置的通配符：

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: *
...

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

4

3 回答 3

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())
       
 },[])
于 2021-03-24T18:13:01.647 回答
2

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

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

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

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

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

于 2021-03-23T02:21:46.597 回答
-1

您可以在任何地方使用 CORS 代理，只需请求 https://cors-anywhere.herokuapp.com/https://www.google-analytics.com/j/collect? .... 反而

于 2021-03-24T23:54:14.930 回答