4

I am trying to add React-GA to a react web app and have followed the documentation by adding it to index.js:

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

However, this results in the following error in the browser console

Access to XMLHttpRequest at 'https://www.google-analytics.com/j/collect?......' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

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

Looking at the Google Analytics HTTP response in the network tab, I am definitely seeing the wildcard set for 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: *
...

However, I am not sure how to resolve this on my end since it appears to be caused by the response from Google.

Paradox
  • 4,602
  • 12
  • 44
  • 88
  • 1
    Getting the same issue in an Angular 10 app. – ldam Mar 10 '21 at 11:05
  • Try this chrome ext: https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en – XTOTHEL Mar 19 '21 at 14:40
  • That's weird. The header `access-control-allow-credentials` should never be combined with a wildcard value for `access-control-allow-origin`. The `access-control-allow-credentials` header unlocks credentialed requests, while a value of `access-control-allow-origin: *` is incompatible with such requests. You're also sending requests to the non-standard `j/collect` endpoint. I think you should look for a fix in your GA settings, as all React-GA does is wrap Google's `analytics.js` library, which also does not usually send credentialed requests. – Semafoor Mar 24 '21 at 21:32
  • This may be related: [Missing Patch method with corsheaders only on chrome](https://stackoverflow.com/q/66341353/2873538) – Ajeet Shah Mar 24 '21 at 21:34

3 Answers3

2

I think your problem is that you are using a wildcard with a request with the credentials mode 'include'.

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

You need to specify the origin for your request to work. here is 'http://localhost:3000'.

You can find more information on this stackoverflow post

I used this code to test Google Analytics with 'create-react-app'.

Dharman
  • 30,962
  • 25
  • 85
  • 135
docmurloc
  • 1,201
  • 4
  • 11
  • Seems likely to be the answer. `access-control-allow-origin: *` is _never_ allowed. Wildcard is invalid for this header. Instead you need to provide a list of valid origins. – Slbox Mar 24 '21 at 19:23
2

Here is an example, using the ReactGa inside an userEffect, and initializing it with some userState variable example userId (optional) and marking cookieDomain as auto and enabling debug.

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())
       
 },[])
utsab_c
  • 54
  • 6
-1

You may be able to use the CORS anywhere proxy, by simply just requesting to https://cors-anywhere.herokuapp.com/https://www.google-analytics.com/j/collect?..... instead

Milan Lakhani
  • 108
  • 6