Local Development

When developing locally with OLAF, you may encounter CORS (Cross-Origin Resource Sharing) issues. This guide explains what CORS is, why it can be problematic during local development, and how to resolve it by properly configuring your environment.

What is CORS?

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that restricts how resources on a web page can be requested from a different domain or origin. It ensures that only authorized domains can access specific resources on a server.

For example:

• If your app is running on http://localhost:3000 and tries to call an OLAF API hosted on https://accounts.olaf.sh, the browser will block the request unless OLAF explicitly allows it.

Why is CORS an Issue in Local Development?

When using OLAF for authentication or API integration during local development:

1. Your app’s local domain (e.g., http://localhost:3000) is not automatically allowed to access OLAF’s resources.
2. OLAF only allows requests from trusted subdomains that you define in the Callback URL configuration of your app.
3. This restriction prevents unauthorized access but can block requests during local testing if your system is not configured to recognize your assigned OLAF subdomain.

How to Solve This

Instead of adding localhost to OLAF, you will:

1. Copy the Hostname value from Hosts tab on the Application details page.
   • E.g. <app-name>-<account-name>.apps.olaf.sh
2. Map copied Hostname value to 127.0.0.1 in your system’s hosts file for local development.

This setup ensures that OLAF recognizes your app’s host and avoids CORS issues.

On macOS or Linux

1. Open the /etc/hosts file with a text editor with administrator permissions:

   sudo nano /etc/hosts
   

2. Add the following entry, replacing <app-hostname> with your Hostname value:

   127.0.0.1   <app-hostname>
   

3. Save the file and exit.

On Windows

1. Open Notepad as an administrator.
2. Navigate to the hosts file:

   C:\Windows\System32\drivers\etc\hosts
   

3. Add the following entry, replacing <app-hostname> with your Hostname value:

   127.0.0.1   <app-hostname>
   

4. Save the file and exit.