I am getting Cors Origin Error on single post page

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.mysite.com/wp-json/wp/v2/posts?_embed=true&page=2. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

When i click on single post page i am getting this error, everything is fine on main home page

Hello @harpreet.freelance

Welcome to the Frontity Community! In order to receive help, it will be really useful if you could provide a way to reproduce the error you are having, a GitHub repo, or at least a link to your site. This way any community member will be able to help you better.

ghbase.com this is site link, it show posts on homepage but when click on any post on single post page it show blank white page.
And
In console i am getting this error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.mysite.com/wp-json/wp/v2/posts?_embed=true&page=2 . (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Hello again,

I’ve just created a new Frontity project from scratch pointing to your URL and I can confirm that navigation between archive pages work, but posts are failing.

It looks like the plugin you are using for inserting ads (WP QUADS Content Ad Plugin v. 2.0.6) is including a js script inside the post content which breaks the Frontity app.

Do you have any staging WordPress environment where you can deactivate this plugin so you can start testing Frontity?

Actually with this plugin i am showing google ads and some another stuff in between posts, so there no option for fetch and print content including js and div? because mostly blog sites admins use this plugin or some embedding code like Instagram Posts, twitter posts?

Now i leave Frontity and trying something another like vue.js WordPress theme or something else which solve my this issue. If you have any solution i will go with Frontity i have 3 to 5 sites which i want to run with any js framework which is easier to use and where i can make themes easier.

Hello again @harpreet.freelance thanks for sharing your concerns.

If the Instagram and twitter posts that you are embedding are iframes, they will work out of the box.
With the <scripts> it’s a bit different as React doesn’t execute <script> s on load when they are rendered with dangerouslySetInnerHTML .

In any case, we have a specific Frontity package to solve this kind of situations, it’s called html2React. Here’s a link to the official documentation: https://docs.frontity.org/api-reference-1/frontity-html2react

The html2react package, among other things, comes with a processor to enable lazy loading for <iframe>s https://docs.frontity.org/api-reference-1/frontity-html2react#iframe and a processor to render <script> tags: https://docs.frontity.org/api-reference-1/frontity-html2react#script

In addition to all these, we will also release a specific package for Google Ads. But you don’t have to wait for it, you can adapt your ads using the html2react package.

So, as far as I see, everything that you are planning is feasible with Frontity, and I’d say that it will be easier for you to use a Framework like Frontity instead of trying to build everything from scratch using React or vue.js directly.

We are aware that the documentation for the html2react package is under construction, so if you need help don’t hesitate to ask so we can help you.

Is there any solution for replace or remove script in content? or if i add script type in google script it will allow in html2react?

Yes, you can use Html2React processors for that: https://docs.frontity.org/api-reference-1/frontity-html2react#create-your-own-processors

It should because by default Html2React it’s including our script processor which, as @pablo said, it’s fixing React’s default behavior of ignoring <script> tags.

As you can see, it recreates the <script> again.


If you are having still having problems, please create a new repo with npx frontity create and add the minimum amount of code necessary to showcase the problem so we have something to look at.