Fixing CORS error with GoogleAdsense on React framework Gatsby
Thank you for your continued support.
This article contains advertisements that help fund our operations.
⇨ Click here for the table of contents of React articles
I will write the solution to the CORS error that occurred with GoogleAdsense on the React framework Gatsby.
I don't know the details well, but originally I was able to introduce Adsense itself and I had been putting it in the article infinitely,
But for some reason, I noticed that an error occurred when I tried to put an ad in the sidebar.
Why...
Error message:
Error in function Object.invokeGuardedCallbackDev
A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information.
No codeFrame could be generatedSolution
It seems that GoogleAdsense requires at least a width of 250px.
What a mess.
Simply give it styles:
&__home-adsense {
width: 250px;
height: 50px;
margin: 0 auto;
}It appeared...!
Summary
It seems that when placing ads on the main content, there was sufficient width, but the sidebar did not have enough width, which seems to have caused the error.
Quite a rare pattern, isn't it?
By the way, when I experimented, the same error occurred even with display:none!
That's all!!!
If you have any questions, corrections, please feel free to point them out on Twitter or elsewhere!
Popular articles
Deploying a PHP7.4 + Laravel6 project to AWS EC2
Related articles
Creating an "Angry Face Scoring App" with ReactNative+CloudVision
