How to connect a completely standalone React frontend to Frappe HR v15 (handling Auth/CORS without)?

Hi everyone,

I am building a custom Employee Dashboard from scratch for Frappe HR v15 because our employees need a highly locked-down, clean interface. Default solutions (like the standard Workspace or Web Views) show unwanted search bars or URLs that allow tech-savvy employees to poke around data they shouldn’t see.

My goal is to build a completely separate frontend in plain React (without using Frappe UI or the React SDK) that limits employees strictly to 4 things:

  1. Attendance: (Employee Check-in/out toggles)

  2. Leave Applications: (Apply for leaves and view status)

  3. Salary Slips: (View and download PDFs)

  4. Tax Declarations: (Submit declarations)

My Issue:
I originally tried a simple HTML/JS proof of concept. The raw APIs work when tested independently, but in the browser, I hit major CORS errors and 404 issues trying to hit http://localhost:8000/api/method/....

Since I am moving to a clean React app (running on its own port, like 3000), how do I properly handle authentication, maintain the user session securely, and fix the CORS block when using standard browser fetch or axios requests? Any minimal code snippets or architectural roadmaps for a plain frontend approach would be massively appreciated!


And for production also

you can add “allow_cors”:[] in config file for site it can solve your problem.

Hi @shubham_26

Check out the tutorial at 25:45 talks about cors

Best of luck