JSON Data Not Indexing On Google On Customer's Websites - blocked by CORS policy

Hi there! I have a commenting app that is built with a combination Bubble & Javascript, which dynamically loads comments via API from a Bubble backend onto customer’s websites. I noticed that Google is not able to crawl comments on my customer’s websites, and the likely culprit is the following error:

Access to fetch at ‘https://app.{mywebapp}.io/api/1.1/wf/comment-get’ from origin ‘https://{customerwebsite}.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

I’ve done some research and it looks like, since header is set to * in the api call example. But when Google Bot tries to crawl it, my backend built in Bubble does not return “*”.

Screen Shot 2023-09-25 at 10.18.30 PM

I also discovered a recently released feature that allows custom headers in api responses, which I think might help? I am just a bit clueless on how to set up the custom headers to address this issue in Bubble, while still including the comments as a JSON response? Could this also be caused by a privacy setting? Could Amazon API Gateway or any other tool help address this?

Any help would be massively appreciated :pray:.

Thanks
IR

2 Likes

Just bumping this :sweat_smile:

1 Like

hi @ianruta11 did you find any solution to include
Acesse-Controle-Allow-Origin?

Hi @jonathan_bn . Yes actually. I ended up adding an intermediary endpoint through AWS API Gateway. Browser ↔ AWS API Gateway ↔ Bubble.

This setup eliminated this error, so dynamic content from the api response is being crawled by Google. Just let me know if you want me to share more details about my API Gateway setup :slight_smile:

Hi @ianruta11 , yes it would be very helpful if you could share how you setup the api gateway :grin: