CORS Error when running a pageView for ReactGA

Question

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.

Answer 1

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'.

Answer 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())
       
 },[])

Answer 3

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