为 ReactGA 运行 pageView 时出现 CORS 错误答案

【问题标题】：CORS Error when running a pageView for ReactGA为 ReactGA 运行 pageView 时出现 CORS 错误
【发布时间】：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

标签： reactjs google-analytics react-ga

【解决方案1】：

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

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

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

您可以在此 stackoverflow 上找到更多信息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 代理。而是

【讨论】：

你不能使用那个服务器