How Low‑Code Platforms Overcome Data Mismatch and CORS Challenges

1. Introduction

In early years, drag‑and‑drop H5 marketing page builders were popular in the front‑end community. They generated static pages with cool effects and can be seen as predecessors of today’s low‑code platforms.

Nowadays static pages are rare; the need to connect dynamic data has driven the second generation of low‑code products.

To satisfy dynamic data integration, low‑code platforms evolved from simple API connections to full data‑model takeover, which is now a key focus for vendors.

Various data‑connection methods exist, each suited to different scenarios.

We will discuss these methods in two parts: (1) classic single‑API connection and its problems; (2) newer solutions such as API orchestration, FaaS, and direct database connections.

2. Traditional manual dynamic data fetching and rendering

Dynamic data fetching and rendering is a basic requirement in web development. Typically the browser loads a page skeleton and JavaScript makes AJAX requests to fill content.

Example with jQuery (from jQuery docs):

var menuId = $("ul.nav").first().attr("id");
var request = $.ajax({
  url: "script.php",
  method: "POST",
  data: { id : menuId },
  dataType: "html"
});
request.done(function( msg ) {
  $("#log").html( msg );
});
request.fail(function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});

Modern MVVM frameworks (React, Vue) use similar patterns:

// React example
import React, {useState, useEffect} from 'react';
import './App.css';
function App() {
  let [dogImage, setDogImage] = useState(null);
  useEffect(() => {
    fetch("https://dog.ceo/api/breeds/image/random")
      .then(response => response.json())
      .then(data => setDogImage(data.message));
  }, []);
  return (
    <div className="App">
      {dogImage && <img src={dogImage} />}
    </div>
  );
}
export default App;

// Vue example
new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }
})

Both approaches essentially send a request to a backend API and render the returned data.

3. Initial low‑code data connection via API URL

In a CRUD component, configuring list and create APIs allows the component to request data and submit new records automatically.

While simple, this approach faces two common problems: mismatched data formats between front‑end and back‑end, and cross‑origin (CORS) restrictions.

4.1 Data format mismatch

When migrating existing business modules to a low‑code platform, legacy APIs often cannot be changed. The platform expects a unified response format, e.g. the AMIS specification:

{
  "status":0,
  "msg":"",
  "data":{ ... }
}

If legacy APIs return a different shape, developers must either adapt the API or use mapping.

4.2 CORS issue

Different domains for the existing business (a.xxx.com) and the low‑code platform (b.xxx.com) cause browsers to block requests.

5. Browser‑side data mapping

Data mapping rewrites fields before sending or after receiving a response, e.g. mapping {a:'x', b:'y'} to {c:'x', b:'y'} using c: ${a}.

In the platform, this is configured via a key‑value map in the UI.

6. Browser‑side request/response adapters

When simple mapping is insufficient, custom JavaScript functions can transform data during request or response.

7. API Proxy

7.1 Unified API proxy

The platform forwards API calls through a backend proxy (e.g., /api/proxy/:apiId), avoiding CORS restrictions.

7.2 Backend data mapping and adapters

Global adapters can be set for the proxy; individual APIs can also have specific mapping and adapter configurations.

8. Summary

The described mechanisms—browser‑side mapping, adapters, and API proxy—allow low‑code platforms to integrate legacy APIs without modifying them, reducing migration cost and preserving existing business logic.

While single‑API connections remain useful for stable open APIs, new features may require API orchestration, FaaS, or direct database connections, which will be covered in the next part.