If you use a Web API in your app, you may notice that the API works when you download the app, or test it on a mobile device, but that it does not work when you publish your app as a web app or test it in the browser.
If this affects your app, it's possible that you are facing a CORS issue. You can open your web app and check your browser console to see if this is the case. If so, you'll see an error like:
"Access to fetch at [URL] from origin ‘https://x.thunkable.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."
This article will explain what this message means, and your options for resolving it.
Why do my API calls work fine on Android and iOS but do not work at all on Web? This is a result of security policies. All modern browsers implement what is called the same-origin policy. This basically states that when you load a web page from a server, all subsequent resources must be loaded only from that same server, including the protocol (http/https) and server name. For instance, https://x.thunkable.com and http://x.thunkable.com are not the same origin because the protocols are different.
In order to load a web site, browsers have to open several connections. For instance, each image needs a connection. Different JS files or CSS files need different connections too, and all those have to be made to the same server or the browser will automatically block them. And you might be thinking, why is the browser so restrictive? Well, allowing requests to multiple origins opens up a can of worms in terms of security. For instance, Authentication tokens or keys could be stolen in transit (from requests), and those tokens are all hackers need to log in to your favorite social media sites or any other services on the web you use (banking, and so forth).
But nowadays, most websites load pieces of information from several different places; so how is this possible? This is when CORS (cross-origin resource sharing) comes into play. CORS is a server-side configuration that may allow browsers to download resources bypassing the same-origin policy, specifying who can access resources and how.
So how does that affect my app? It actually can be affected in many different ways. As mentioned earlier, if you are trying to get data from a third party server (say Google Sheets, Airtable, or any other API), those servers will have their own CORS configuration, and you as a client have no way of modifying that. The configuration itself can be very different. Some servers may allow all origins (anywhere on the Internet) or calls only from certain origins (certain domain names they own). They might allow GET requests but not POST/PUT requests, and they might allow GET requests for public data but not for API calls that need authentication.
Note that if you own the server that you are talking to in terms of hosting your own data, then you can configure CORS so that web browsers can access it, or you can also have a finer-grain CORS configuration so only your app can talk to your server.
Why is this an issue on web apps, but not on native apps? The same-origin policy does not affect mobile apps, which explains why the exact same set of blocks works on devices and not on web apps.
But wait, there has to be a way around all this? There are a number of browser extensions that can disable the same-origin policy, and that might work in your case. Just remember, however, that you are more vulnerable to attacks, and also that while this might work while you are developing your app, if you want to send the app to users, they will also have to install the extension. We do not recommend messing with the browser like that.
Another way is to use a proxy (a server in between your web app and the third party server) that can make calls for you. As mentioned earlier, servers do not have the same issues.
You may find this tutorial by Thunkable Community member drted useful: Create Your Own Web API Service Using Firebase Functions and NodeJS!
References: