When developers build applications with FlutterFlow, they often use Application Programming Interfaces (APIs) to exchange data between different software systems. While integrating APIs within FlutterFlow applications is generally straightforward, a common issue arises: API calls work perfectly during testing but fail when the app is launched on the web or on real devices. This guide explores why this happens and how to solve it.

APIs act as intermediaries, allowing applications to request data or perform actions on other services. An API call is simply a request made by one software program to an API to access its functions or data.

Cross-Origin Resource Sharing (CORS) is a security feature enforced by browsers. It prevents websites from making requests to a different domain than the one they were loaded from. This is to protect against malicious attacks but can inadvertently block legitimate API calls from a web application to its server if they're perceived as cross-origin.

FlutterFlow applications use proxies to circumvent CORS restrictions. These proxies serve as middlemen, forwarding API requests to the target server and then sending the responses back to the application. Since these requests appear to come from the same domain (the proxy), they are not blocked by CORS policies.
​
You can also configure the proxy settings in the API's advanced settings, check the attached screenshot for a clear understanding:
​

​

API calls function seamlessly in FlutterFlow's test mode because they're made from the same origin—the FlutterFlow server. However, once the application is deployed on the web or a real device, the requests come from a new domain. This change triggers the CORS policy, leading to blocked requests.

Adjust your server's settings to accept requests from your FlutterFlow app's domain. This typically involves setting the `Access-Control-Allow-Origin` header to include your app's domain. The specifics will vary based on your server's setup.

If you can't alter the server's CORS settings, a CORS proxy can be a viable alternative. This proxy forwards requests from your app to the API, sidestepping CORS restrictions. Choose a secure and reliable proxy to avoid security issues.

Serverless functions (like Google Cloud Functions or AWS Lambda) can request data from an API and relay it to your FlutterFlow app, effectively bypassing CORS limitations. you can try deploying the private APIs in that case to achieve the implementation provided by FlutterFlow using Google Cloud Functions.

An example of dealing with CORS issues is the integration of the PlacePicker widget in a published web application. To ensure it works correctly, you must add your website's URL to the API key settings for your Google Place Picker in the Google Cloud Platform. This step is crucial for avoiding CORS-related issues in your published application.

While integrating APIs into FlutterFlow apps is designed to be user-friendly, understanding the impact of different deployment environments on API calls is crucial. By effectively managing CORS policies and utilizing proxies or serverless functions, developers can ensure their applications run smoothly, regardless of the environment.

Additional Resources: