Making /api accessible only from the app itself

I am developing a React application which uses Supabase and OpenAI API. To hide the secret prompt from the user, I created /api directory and added an endpoint for receiving the prompt. This solves the problem, however the other problem is that EVERYONE can access it.

CORS policy blocks requests from other domains but this is only relevant to browsers. Requests from Postman or any other http client can freely access it.

To my knowledge, there isn't any direct way to implement this. What is the simplest way to achieve what I want (I'm quite new to this)?

I really am confused. I see recommendations to create an API key for my own backend API, but then we are back to the same situation that I begin with that I need to hide an API key from frontend.

The domain troubleshooting guide can help with most custom domain configuration issues. You might be able to use that guide to solve it before a human is available to help you. Then you can come back here and share the answer for bonus points.

https://vercel.com/docs/projects/domains/troubleshooting

You can also use v0 to narrow down the possibilities.

The server side code doesn't need /api to access 3rd party resources, it can make the call directly. The /api is probably there for your client side code to allow your clients to reach 3rd party resource with some kind of secret token saved server side.

If you restrict the /api from client code access then your clients won't be able to use it at all. What you might want to do is hide the access to /api behind any sort of authentication in the client code, etc. If that's not in scope for the client app then the best bet is rate limit calls on the server side, etc.