CORS Error using previewer (Web App)

page.Page27:1 Access to fetch at from origin ‘https://platform.preview.appgyver.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: 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 want to link my app with apps script using web app. Please help me solve this CORS

Hi!

First check that it’s an actual CORS problem and not some other error that is displayed as CORS error by checking in mobile preview if it also fails. If it works on mobile, it’s a CORS error. If it does not work on mobile, it’s a misconfiguration. You can use the web developer console for the error or use something like cURL or Postman to find out the correct configuration for the API.

If it is a CORS error however, it has to be solved from the server/backend side, as we have no way to affect it. If you can not edit the CORS policy, another way to solve this is to set up a proxy for the API.

Hi @Mevi,

It is working on apps. The error happened when I use all web version including apple and android.

I do not know how to solve this CORS issue, Appgyver-Google appscript. The same api works fine if I use Xano-Google appscript.

1 Like

Hi! Yes, all web versions would have the same problem. However, the mobile preview app should not have the same problem, if it’s a CORS issue.

If it is a CORS issue, I can’t help you. If it is not a CORS issue, there is some misconfiguration in your API, and you can use the debugger or the developer console (e.g. Chrome’s developer console on the web preview) to find out more about the error.

Hi @Mevi , I have the same problem trying to use the Google Maps Places API. In mobile preview it works while in web preview I get CORS error. How can I fix this? I need to use my app on the web before mobile and so I’m stuck! Thanks for your help!

Please share all the relevant tabs from the Chrome Dev Tool module.







Madness going on.
This is a CORS issue since it’s only happening with the browser. It is browser-related issue.
You need to review your CORS settings again from the google cloud dashboard.

Ok you say that it is a problem of my browser that concerns the CORS but in my Google Clouds dashboard I have no restrictions on access to the API (see screenshot of the detail of my API key that I am using). This should mean that with this API key I can access all (enabled) Google APIs from any website or mobile app. I’m doing it wrong ?
This hypothesis of mine is confirmed by the fact that:
1 - I access the api both from POSTMAN and from google Chrome;
2 - my Data Source in Appgyver pointing to the Geocoding service (downloaded from the marketplace) works fine.

Where am I wrong then? Help me understand please!

All i can do now is suggest you do a CORS search in the Console dashboard and check these options:

…and review that all steps work well:

1 Like

Hi, I had already followed these commands step by step (which you shared with me in another post, and I thank you for that). Everything in the shell seems to have happened correctly.
this is my CORS configuration in Cloud Shell:

I tested my API URL at: CORS Checker | Test a URL for valid CORS headers | ANYJSON
and I get this:
“This URL will not work correctly with CORS It does not have the access-control-allow-origin header set to *. Without this header, requests from other domains cannot be made to it via a users browser.”

I’m trying hard to tell Google Clouds to accept every CORS request, but nothing happens.
This is the block of code in “cors_config.json” in the Google Clouds shell:

[
{
“origin”: [“*”],
“method”: [“GET”],
“responseHeader”: [“Content-Type”],
“maxAgeSeconds”: 3600
}
]

Is there something wrong? Thank you

Did you try this?

Hi, yes I tried it (see my answer above)

Oh I missed that. (you’ve posted quite a few times about the same issue, I lost track)
So this setup is good. It is not a CORS issue, it’s an API call problem.

you are right, I am posting everywhere because it is a really absurd problem.
So to recap:

  • the CORS configuration on my Google Cloud is correct.
  • My API call is apparently correct because it works from my browser, Postman and also from my mobile app (called raw http req) BUT it doesn’t work as appgyver.

So where is the problem that I haven’t been sleeping for 3 days ?! ;(

Only AppGyver team can share insights here…

Is anyone from the AppGyver Team here pleaseee???

I’m not member of the Team, but maybe you could try this:

As of now for a quick solution for web preview I woukd suggest installing the “no-cors” chrome extension and test the app that way. It will most probably allow those requests that would else be blocjed by CORS policy.

I’ll try to get back to this topic next week for further investigation.

1 Like