[英]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:我正在尝试将 React-GA 添加到 react web 应用程序中,并通过将其添加到 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'.
从源 'http://localhost:3000' 访问 XMLHttpRequest 在 'https://www.google-analytics.com/j/collect?......' 已被 Z5A8FEFF0B4BDE3EEC9244B76023B79 的访问值阻止-Control-Allow-Origin' 当请求的凭据模式为“包含”时,响应中的 header 不能是通配符“*”。 The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。
analytics.js:37 POST https://www.google-analytics.com/j/collect?..... .
analytics.js:37 POST https://www.google-analytics.com/j/collect?...... net::ERR_FAILED
净::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:查看网络选项卡中的 Google Analytics HTTP 响应,我肯定看到了为访问控制允许标头设置的通配符:
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.但是,我不确定如何解决这个问题,因为它似乎是由谷歌的回应引起的。
I think your problem is that you are using a wildcard with a request with the credentials mode 'include' .我认为您的问题是您使用通配符和凭证模式 '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 '.
当请求的凭证模式为“包含”时,响应中的“Access-Control-Allow-Origin”header 的值不能是通配符“*”。
You need to specify the origin for your request to work .您需要指定请求的来源才能正常工作。 here is 'http://localhost:3000'.
这里是'http://localhost:3000'。
You can find more information on this stackoverflow post您可以在此 stackoverflow 帖子中找到更多信息
I used this code to test Google Analytics with 'create-react-app'.我使用此代码通过“create-react-app”测试 Google Analytics。
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.这是一个示例,在 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())
},[])
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?.... .您可以在任何地方使用 CORS 代理,只需向https://cors-anywhere.herokuapp.com/https://www.Z50F09D94FD93ABC76A0D2C0267060B2.8请求。 instead
反而
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.