CODEWITHSUNDEEP
reactjsgoogle-analyticsreact-ga
Paradox
Paradox

Reputation: 4566

CORS Error when running a pageView for ReactGA

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.

Upvotes: 4

Views: 2359

Answers (3)

Milan Lakhani
Milan Lakhani

Reputation: 108

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

Upvotes: -1

utsab_c
utsab_c

Reputation: 54

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

Upvotes: 2

docmurloc
docmurloc

Reputation: 1239

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

Upvotes: 2

Related Questions