CORS Policy
Overview
The CORS policy, or Cross-Origin Resource Sharing policy, is a security feature in web browsers that controls how resources from one origin (like a website) can be accessed by another origin. This means 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.
Sometimes, the CORS policy prevents a connected API from transferring data when you test your project in the web preview or publish it as a web app.
Confirm the Cause
If it appears as though your API connection isn't working when you test your project in the web preview or publish it as a web app, do the following:
Open your project's web app.
Check your browser console for errors.
The following error indicates a CORS policy blockage: "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."
Native Mobile Apps
The CORS policy impacts web apps viewed in a browser but not native mobile apps. This is why the exact same set of blocks works on mobile devices and not on web apps.
Because the CORS policy does not impact mobile apps, we recommend testing your app using Thunkable Live or downloading or publishing it.
Work Arounds
CORS Policy Blockers
Several browser extensions can disable the CORS policy, which might work in your case. However, we do not recommend this method for the following reasons:
You are more vulnerable to attacks.
While this might work while you are developing your app, if you want to send it to users, they will also have to install the extension.
Proxy
Another technique is to use a proxy, a server between your web app and the third-party API server, to make calls for you. Some Thunkable Community members use Xano as a proxy.
You may also find this tutorial by a Thunkable Community member helpful: Create Your Own Web API Service Using Firebase Functions and NodeJS.
Last updated