为 ReactGA 运行 pageView 时出现 CORS 错误

Posted 2023-02-22

【中文标题】为 ReactGA 运行 pageView 时出现 CORS 错误

【英文标题】：CORS Error when running a pageView for ReactGA

【发布时间】：2021-05-09 09:26:14

【问题描述】：

我正在尝试将 React-GA 添加到 React Web 应用程序，并按照文档将其添加到 index.js：

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

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

访问 XMLHttpRequest 在 'https://www.google-analytics.com/j/collect?......' 来自原产地“http://localhost:3000”已被 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: *
...

但是，我不确定如何最终解决此问题，因为它似乎是由 Google 的响应引起的。

【问题讨论】：

在 Angular 10 应用中遇到同样的问题。

试试这个 chrome 分机：chrome.google.com/webstore/detail/allow-cors-access-control/…

这很奇怪。标头 access-control-allow-credentials 不应与 access-control-allow-origin 的通配符值组合。 access-control-allow-credentials 标头解锁凭证请求，而 access-control-allow-origin: * 的值与此类请求不兼容。您还向非标准 j/collect 端点发送请求。我认为你应该在你的 GA 设置中寻找修复，因为 React-GA 所做的只是包装 Google 的 analytics.js 库，它通常也不发送凭据请求。

这可能是相关的：Missing Patch method with corsheaders only on chrome

【参考方案1】：

我认为您的问题是您将通配符与凭据模式“包含”的请求一起使用。

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

您需要指定请求的来源。这里是“http://localhost:3000”。

您可以在此 *** 上找到更多信息post

我用这个code 用“create-react-app”测试了 Google Analytics。

【讨论】：

似乎是答案。 access-control-allow-origin: *从不被允许。通配符对此标头无效。相反，您需要提供有效来源的列表。

【参考方案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())
       
 ,[])

【参考方案3】：

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

【讨论】：

你不能使用那个服务器