Connections, auth and API

Why do I get a CORS error when a custom component calls the API in the development environment?

Don't hard-code the production domain. Call the API with a relative path so it works in every environment.

Fix

Short answer: Your component is calling the production domain from the development environment, which is blocked. Use a relative API path so each environment calls itself.

Why it happens

  • Development and testing environments can't call the production environment's API.
  • A hard-coded URL such as https://<subdomain>.kissflow.com/user/2/... always points to production, even when the app runs in development.

How to fix it

  1. Remove the domain from the URL and use a relative path, for example const apiUrl = `/user/2/${accountId}/${userId}`;.
  2. Call it with kf.api(), which sends the signed-in user's authentication automatically.
  3. Test the component again in the development environment.

To give a user access to the development environment:

  1. Make sure the user is already added in production. Users sync from production to the other environments, but you still map them to each one.
  2. In the production account, click your profile picture > Environments.
  3. Click Manage under the development environment URL.
  4. Click Add users, select the user and click Add. See adding users to the development environment.

Tip

Relative paths also keep the component working after you deploy the app to testing or production.

Related answers