Version 1.0 – Local build, CORS, and what I’m fixing next

Today I started working on version 1.0 of prayertimes.sg.

For this first pass, I kept things intentionally simple. The app is built locally using plain old HTML, CSS, and vanilla JavaScript — no frameworks, no build tools.

Everything worked visually, but the moment JavaScript tried to fetch data from api.prayertimes.sg, the request failed.

The culprit turned out to be CORS.

CORS (Cross-Origin Resource Sharing) is a browser security rule. It prevents a website from requesting data from another domain unless that domain explicitly allows it.

In my case:

• The frontend was running on localhost
• The API lives on api.prayertimes.sg

From the browser’s perspective, these are different origins. Since my API does not yet allow requests from localhost, the browser blocks the request even though the API itself is responding correctly.

One common workaround here is to introduce a proxy server.

A proxy acts as a middleman:

• The browser calls the proxy (same origin, so no CORS issue)
• The proxy then calls the external API
• The proxy returns the data back to the browser

This works, but it also adds another server and extra complexity just to support local development.

My next step is to configure CORS directly on the API so that localhost is allowed during development. This will let the frontend fetch data directly without needing to spin up a temporary proxy server.

I haven’t implemented this yet,  but this small blocker forced me to properly understand how browsers enforce cross-origin rules, and why API design isn’t just about returning JSON, but also about deciding who is allowed to access it.

More updates coming as version 1.0 takes shape.